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';

score 77 · Accepted Answer · edited Nov 14 '21 at 14:21

77

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 '21 at 14:21

NearHuscarl

66,950
18
261
230

answered Apr 30 '19 at 10:08

Juraj Kocan

2,648
1
15
23

2

node that the trailing `*` in `"src/*": [` is important! – handler Feb 14 '20 at 16:43
Any way to not have to import `index`? – eivindml Mar 19 '20 at 15:52
@eivindml i don't know about way how to do it. in one folder you can have multiple files... – Juraj Kocan Mar 19 '20 at 15:59
@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 Mar 19 '20 at 16:47
With relative paths we can skip the `/index`: https://codesandbox.io/s/sharp-mendeleev-11di9 – eivindml Mar 19 '20 at 16:53
so it looks like default behavior – Juraj Kocan Mar 19 '20 at 20:06
Adding the baseUrl fixed it for me. Perhaps you could emphasize that in your answer along with the paths to make it a little more clear :) – Spencer Mar 10 '21 at 05:38
If you are using webpack, you also need to configure the resolve aliases. `resolve: { alias: { '@': path.resolve(__dirname, 'src') } }` – killjoy Sep 03 '21 at 13:42
I would like to not need to put 'src' in the path. Any way to change the above import to still import from ./src, but: `import { A } from 'components/A/index'`? – Neil Gaetano Lindberg Dec 09 '21 at 21:21
"components/*": [ "./src/components/**" ], – Juraj Kocan Dec 13 '21 at 08:00
@JurajKocan thank for the response, but that didn't work either. – Neil Gaetano Lindberg Dec 17 '21 at 17:13
I made a super simple project to mess with settings until they're correct. Feel free to fork and make a working example! https://github.com/neillindberg/non-relative-path-tsconfig – Neil Gaetano Lindberg Dec 17 '21 at 18:21

Pinka · Answer 2 · 2021-12-15T14:43:04.590

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 '21 at 14:43

answered Sep 30 '21 at 06:49

Pinka

201
2
6

1

For me, this breaks node_modules imports as it's trying to access from the src folder. – Conrad Kay Nov 22 '21 at 23:04
Could be that some other setting is affecting the node_modules imports. Added a complete tsconfig.json that works for me. – Pinka Dec 15 '21 at 14:45
For me, I had to set `"baseUrl": "./src"` – Drew Daniels May 10 '23 at 16:57
@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: https://stackoverflow.com/questions/76980414/absolute-path-typescript-react-works-in-ide-linting-but-not-in-cra-runtime – Fiddle Freak Aug 28 '23 at 02:38

using absolute paths in typescript for imports

2 Answers2

Linked