Webstorm not resolving module imports using typescript paths

Hello there! I am using Webstorm 2019.3.4

I found it very problematic to configure "paths" option so that IDE does not show me error hints (tsc compiler works as expected). The story is the following, I have two tsconfig files one extending the other:

src/server/tsconfig.prod.json:

src/server/tsconfig.json:

 

In my case, tsonfig.json extends tsconfig.prod.json, so I believe every rule from tsconfig.prod.json should automatically be applied to code analysing via default tsconfig.json file. But I encounter the following problem when trying to import files from src/shared directory:

 

I tried literally everything: adding include: ["**/*"] to both tsconfig and tsconfig.prod and much more, but nothing seems to work. What am I doing wrong here? The most frustrating thing is that compiling my project with proper config leads to no errors at all.

Could someone please help with this? I am totally confused.

2
45 comments

Is there any update after more than 2 years? 

BTW this concept works fine on Eclipse. So I guess it is just a problem in the implementation.

0

When searching for typescript configuration, the IDE traverses the folders tree up to the project root looking for a nearest tsconfig.*.json file current *.ts file is included in. tsconfig.*.json here are the patterns configured in Settings | Editor | File Types | TypeScript Config file type.

If this doesn't work as expected for you, please share a sample project that reproduces the issue

0

Is there any update after more than 2 years? 

-2

+1

I have monorepo. When just write imports inside file, webstorm resolves them correctly according tsconfig paths. But when move file from place to place, it rewrites imports in the file and all another files that used current file to some very long relative or incorrect absolute pathes (starting from 'src/...')

0

Here are few errors:

 

a.ts:

module m.a {

    export class A {

        b: m.b.B

    }

}

 

b.ts

module m.b {

    export class A {}

 

    export class B {

        a: m.a.A

    }

}

 

In file a.ts class A marked as unused. If I try to `Find usage` it will not find field a from b.ts.

Also, the navigation is broken. When I try to navigate from file b.ts on B.a declaration – it send me to m.b.A from b.ts when should to m.a.A in file a.ts,.

0

Valera Steb not sure what relation this issue has to using path aliases

Also, your code doesn't compile, there are "TS2694: Namespace 'm' has no exported member 'b'." and "TS2694: Namespace 'm' has no exported member 'a'." errors reported for 

m.b.B

and

m.a.A

 references

0

Elena Pogorelova I don’t know where I should put info about this issue. With tsconfig.json:

{
  "compilerOptions": {
    "module": "None",
    "target": "es5",
    "sourceMap": true,
    "outFile": "dist/m.js"
  },
  "exclude": [
    "node_modules"
  ]
}

It compiles to single js file.

But I tried this on another pc with fresh Webstom 2023.1.2 and it work as expected. I had remove IDE from pc on my work (with all the stuff in Roaming and other related folders), reinstall, and it start work as expected.

0

Working with an Nx workspace with one app and a few libs.
`tsconfig.base.json` as the main configuration file and `tsconfig.json` for each lib.

I'm getting the TS2307: Cannot find module '@path/to/lib' or its corresponding type declarations. for all the lib imports.

tsconfig.base.json
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es6",
"module": "esnext",
"lib": ["es2018", "dom"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"baseUrl": ".",
"noUnusedLocals": true,
"noUnusedParameters": true,
"allowSyntheticDefaultImports": true,
"paths": {...}
}



Editor | File Types | Typescript config

Language & Frameworks | Typescript 


Anyone can help?
0

@david Bronfen can you check if you have a tsconfig.editor.json file somewhere? I think I had a similar issue a while ago and extended the tsconfig.base there

1

@ Denis Solve it, Thanks!!

0

I had this problem too - but only with Angular and jasmine spec files. The imports would not work, but the auto-complete did. I was not able to solve it, but it was fixed when I rolled back to the last version of WebStorm. I hope they are able to fix this before the next release.

0

This is a sneaky one, but I do think it's a Webstorm bug, mainly because I don't see the same issue in VsCode. I haven't been able to replicate it in a slimmed-down project. But I see this in large  Nx monorepos, with several apps and libs. It generally occurs after I add a new app or lib (and a new tsconfig path). I won't get compilation errors, but I will see a red line under the import. Invalidate caches + restart fixes it. But it's pretty obnoxious to have to do that every time I add a new tsconfig path. The above answer seemed to work at first. But after editing the tsconfig path from `"@myOrg/myLib/*": ["libs/myLib/src/index.ts"]` to `"@myOrg/myLib": ["libs/myLib/src/index.ts"]` I saw the same problem again.

0

I know I am late to the party, but currently also facing this behavior. I have a large Angular CLI Monorepo (not Nx) with files in a ./dist directory (the libraries) that an alias in the root tsconfig.json points to.

"paths": {
  …
  "lib-abc": [
    "dist/libs/abc/abc",
    "dist/libs/abc"
  ],
…
}

In editor-windows I get red underlines on code like

import {SomeModule} from 'abc';

To me it looks l ike a bug. VS Code shows the imports just fine. In WebStorm I get red underlines on the imports, despite TSC compiles just fine. 

Any updates on this?

Cheers,
Peter.

0

Peter Kassenaar unfortunately it's not clear what is wrong. We can’t investigate this problem without a sample project from your side.

0

Please sign in to leave a comment.