Typescript cannot find module that was defined in "paths" setting

Question

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'

I'm pretty sure you still need to explicitly mention the file you want to import from: import { Test } from './Test' — user5734311
– user5734311, Commented Jun 9, 2017 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
– Fabian Lauer, Commented Jun 9, 2017 at 18:32

Chris · Accepted Answer · 2017-06-21 13:31:35Z

52

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*"]

answered Jun 21, 2017 at 13:31

Chris

2,2873 gold badges23 silver badges29 bronze badges

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

7 Comments

牛さん Over a year ago

also, if you wanna import { foo } from '@app work, you need this "@app*": ["src/app","src/app*"]

David Duman Over a year ago

interesting, this answer helped me with an angular project...

Asking Over a year ago

@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?

mrClean Over a year ago

@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.

Rob McKee Over a year ago

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.

|

Mostav · Accepted Answer · 2023-01-22 17:29:38Z

3

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/*"]
   }
}

edited Jan 22, 2023 at 17:29

answered Jan 22, 2023 at 17:22

Mostav

2,6911 gold badge19 silver badges29 bronze badges

Comments

usersina · Accepted Answer · 2024-11-28 16:15:50Z

1

I recommend using tsc-alias. See the full example in this thread.

answered Nov 28, 2024 at 16:15

usersina

1,9451 gold badge24 silver badges43 bronze badges

Collectives™ on Stack Overflow

Typescript cannot find module that was defined in "paths" setting

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related