Typescript path resulting in wrong import

Question

I am using Typescript (4.1.3) and I started using custom paths in tsconfig.json. Ever since, when I import any .ts file, if I dont use the whole path , I get the error:

Error:(138, 33) TS2307: Cannot find module 'pages/foo/bar' or its corresponding type declarations.

To fix that I must add the prefix 'src/', so I get 'src/pages/foo/bar'. The project itself works fine, even with this TS Error.

Here is my tsconfig.json file

{
"compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "target": "es6",
    "strict": true,
    "declaration": false,
    "noImplicitAny": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strictNullChecks": false,
    "baseUrl": ".",
    "paths": {
        "foo": [
            "bar.js"
        ]
    },
    "types": [
        "quasar",
        "node",
        "cypress"
    ],
    "lib": [
        "es2018",
        "dom"
    ]
},
"exclude": [
    "node_modules"
],
"extends": "@quasar/app/tsconfig-preset"

}

Riad Baghbanli · Accepted Answer · 2021-01-29 19:36:45Z

4

compilerOptions.baseUrl is being prefixed to path specified in import statement to create path relative to the location of tsconfig.json file.

In your case the path to module bar.js in relation to tsconfig.json file is src/pages/foo/bar. So you either specify ./src in compilerOptions.baseUrl or specify that complete path in import statement.

answered Jan 29, 2021 at 19:36

Riad Baghbanli

3,3461 gold badge16 silver badges23 bronze badges

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

2 Comments

Eduardo Sousa Over a year ago

I see, but why this happens only if I add the "paths" configuration in tsconfig?

Игор Ташевски Over a year ago

Not working, w/ tsc or w/ ts-loader.

Pavan · Accepted Answer · 2021-01-29 18:36:14Z

1

This seems to be issue with your config baseUrl:"." , this means that js module resolution happens from current dir that's why your imports complaints to add src dir.

Make sure you point this config to src dir then all import resolution takes place from that dir. Example: baseUrl:"./src"

More details : https://www.typescriptlang.org/tsconfig#baseUrl

answered Jan 29, 2021 at 18:36

Pavan

8587 silver badges18 bronze badges

Comments

Khalid Rafik · Accepted Answer · 2021-09-25 00:45:45Z

0

Just add "typescript-path-fix" into your task runner pipeline or call it just before compiling your code

Use this package to resolve your issue: https://www.npmjs.com/package/typescript-path-fix

answered Sep 25, 2021 at 0:45

Khalid Rafik

473 bronze badges

Collectives™ on Stack Overflow

Typescript path resulting in wrong import

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related