using absolute paths in typescript for imports

Question

my directory structure is:

|
|__src
|    |_components
|                |
|                |_A
|                  |_index.tsx
|
|
tsconfig.json
package.json

I want to import A like this:

import { A } from 'src/components/A';

My tsconfig.json looks like this:

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "jsx": "react",
    "lib": ["es5", "es2015", "es2016", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noImplicitReturns": true,
    "outDir": "dist",
    "removeComments": false,
    "skipLibCheck": true,
    "strict": true,
    "strictFunctionTypes": false,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "typeRoots": ["./node_modules/@types"],
    "types": ["node", "jest"],
    "paths": {
      "*": ["./node_modules/@types/*", "./types/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["./node_modules", "./dist", "src/**/*.test.ts", "src/**/*.test.tsx"]
}

But the import does not work and I get the error:

can't find module 'src/components/A';

NearHuscarl · Accepted Answer · 2021-11-14 14:21:40Z

90

In tsconfig.json define paths like this:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": [
        "./src/*"
      ],
    }
  }
}

(and you have to import it with name of file as well)

import { A } from 'src/components/A/index'

based on the comments no need to import with file name as long as it is called index (With relative paths we can skip the /index)

edited Nov 14, 2021 at 14:21

NearHuscarl

83k24 gold badges321 silver badges291 bronze badges

answered Apr 30, 2019 at 10:08

Juraj Kocan

2,8981 gold badge19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

handler Over a year ago

node that the trailing * in "src/*": [ is important!

eivindml Over a year ago

Any way to not have to import index?

Juraj Kocan Over a year ago

@eivindml i don't know about way how to do it. in one folder you can have multiple files...

eivindml Over a year ago

@JurajKocan It could assume components/A means /components/A/index if the index is present. Vanilla JS with react-scripts, webpack or where this behavior is defined, supports this out of the box.

eivindml Over a year ago

With relative paths we can skip the /index: codesandbox.io/s/sharp-mendeleev-11di9

|

Pinka · Accepted Answer · 2021-12-15 14:43:04Z

15

Imports with absolute paths work for me using this configuration in tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

This is the complete tsconfig.json that works for me in CRA app:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

edited Dec 15, 2021 at 14:43

answered Sep 30, 2021 at 6:49

Pinka

2313 silver badges6 bronze badges

4 Comments

Conrad Kay Over a year ago

For me, this breaks node_modules imports as it's trying to access from the src folder.

Pinka Over a year ago

Could be that some other setting is affecting the node_modules imports. Added a complete tsconfig.json that works for me.

Drew Daniels Over a year ago

For me, I had to set "baseUrl": "./src"

Fiddle Freak Over a year ago

@ConradKay you need to leave out the src folder in your imports. For example import { foo } from 'bar' and not import { foo } from 'src/bar'. This actually annoys me as it makes it hard to read if my imports come from a library or a folder/code that I wrote. I'm currently trying to solve that problem here: stackoverflow.com/questions/76980414/…

Collectives™ on Stack Overflow

using absolute paths in typescript for imports

2 Answers 2

14 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related