38

In my React project I have a module alias defined in webpack config. I want to start moving over to Typescript.

// I tried to simplify the setup as much as it makes sense

This is my tsconfig.json in the root folder:

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "jsx": "react",
    "noImplicitAny": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ],
    "baseUrl": "./src",
    "paths": {
      "app": ["./app"]
    }
  },
  "include": [
    "src/**/*"
  ]
}

This is my project structure:

[rootDir]
|
|- [src]
|  |
|  |-[app]
|    |
|    |-[components]
|      | ... react components live here
|      |- Test.tsx
|      |- SomeComponent.tsx
|      |- index.js (export { default as Test } from './Test')
|
|- tsconfig.json
|- webpack.config.js

I use the awesome-typescript-loader with Webpack 2 and I also included the plugin there to load the paths. I also use Visual Studio Code and it has Typescript built in, but that shows the same error.

In my Typescript component SomeComponent.tsx I want to include another component like so:

import * as React from 'react'
import { Test } from 'app/components'

I get the following error:

Cannot find module 'app/components'
Chris
  • 2,069
  • 3
  • 22
  • 27
  • I'm pretty sure you still need to explicitly mention the file you want to import from: `import { Test } from './Test'` –  Jun 09 '17 at 16:57
  • @ChrisG Not in this case because there's an `index.js` in the `components` directory. Have you tried appending a slash to the import path? Like this: `import { Test } from 'app/components/'`. I *think* I had a similar issue before but I can't say for sure... – Fabian Lauer Jun 09 '17 at 18:32

2 Answers2

45

The solution is to edit the paths config to find nested files.

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

Now when I add import { Test } from 'app/components' Typescript will look into src/app/components/index.js and it works. I also like to add @ to aliases to avoid conflicts with other modules. Like so:

  "@app*": ["src/app*"]
Chris
  • 2,069
  • 3
  • 22
  • 27
  • 7
    also, if you wanna `import { foo } from '@app` work, you need this `"@app*": ["src/app","src/app*"]` – 牛さん Jul 15 '20 at 13:50
  • interesting, this answer helped me with an angular project... – dvdmn Oct 05 '20 at 22:12
  • @Chris, i use `react: 17.0.1` and if i do this when i start my project i get ` - compilerOptions.paths must not be set (aliased imports are not supported)`. Do you know a solution? – Asking Apr 02 '21 at 13:27
  • @Asking when I run into that it's because of Create React App not allowing it. It actually overwrites the file--very aggressive. There are some workarounds online, but I couldn't get them to work effectively. – mrClean May 03 '21 at 17:07
  • In a CRA you need to use a package like Craco to allow the customization of web pack configs. You will have to make a separate tsconfig.paths file to store the path alias as Craco will overwrite the tsconfig to strip paths from there (no clue why but it does). Then in your tsconfig you have to add the line `"extends": "./tsconfig.paths.json"` to the top level of the config. – Rob McKee Aug 25 '21 at 14:25
  • Is src the right path to be pointing at - would / should it not be dist - i.e. what happens after you have compiled? And your code is in the dist file and your path is point to src? – Jeremy Mar 12 '22 at 13:26
  • This did not work at all for me in a backend application where the destination folder differs from the source. The only thing that worked was to introduce `module-alias`. If anyone has any ideas on how to fix this to avoid the new dependency, I'd very much appreciate it. – dimiguel Apr 03 '22 at 18:50
2

For a folder structure like:

[rootDir]
|
|- [src]
|  |
|  |-[app]
|    |
|    |-[components]
|      | ... react components live here
|      |- Test.tsx

To import like this:

import { Test } from 'app/components'

You need to add "src/components" beside "src/components/* in tsconfig.json:

{
   "compilerOptions": {
   "baseUrl": ".",
   "paths": {
     "app*": ["src/components", "src/components/*"]
   }
}
Mostav
  • 2,203
  • 15
  • 27