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.

15 comments
Comment actions Permalink

Please try adding tsconfig.prod.json to the list of patterns registered for TypeScript Config file type in Settings | Editor | File Types and restart the IDE - does it help?

0
Comment actions Permalink

Actually no, the problem still persists.

0
Comment actions Permalink

Just checked the project in VisualStudio, it shows the same error, so this is probably not a bug of WebStorm, I just can't get what is wrong in my scenario.

0
Comment actions Permalink

could you share a project it can be reproduced with?

0
Comment actions Permalink

No, basically I cant reproduce it with small repositories. I tried a lot, but it seems to work correctly for small stubs. I am desperate, I really do not want to switch to VS code because I love your IDE. However, now things got even worse. It seems like WebStorm stopped to recognise nested tsconfigs, look below.

Any file in the project produces errors concerning missing --jsx in tsconfig and cannot resolve imports. Example:

And here how this src/client/tsconfig looks like:

 

As you can see it has --jsx flag and --baseUrl, so everything should be cool, but I have a lot of errors. Can I at least disable typescript checks for the whole IDE? Note that if I put these options into root tsconfig, everything is becoming cool. Webstorm acts as if no src/client/tsconfig exists and I simply cannot fight with it. Please, please, help me.

 

 

0
Comment actions Permalink

can't reproduce... Could you check if the order in which you import files matters? Close all files except for this .tsx, close project, then re-open it - can you still see the errors?

To disable typescript checks, you have to turn tsserver off in Settings | Languages & Frameworks | TypeScript by disabling Typescript Language Service option

1
Comment actions Permalink

Elena, wow! Thank you for such a quick help! Indeed, that helped a lot, now the project does not show any errors, as expected. I tried literally everything: reinstall app, update to 2020.1, update macOS to Catalina, invalidate cache and restart. But during all these operations there were the same files open.

Now I closed all of them, restarted IDE and everything works.

Could you tell why this happened? From my experience with WebStorm I could say that this happens quite often, usually I was able to edit configs, but this time I literally got stuck.

0
Comment actions Permalink

It's not always obvious, but the order in which you open the files can matter... The language service normally uses the nearest tsconfig.*.json current .ts file is included in, traversing the folders hierarchy from current folder up to the IDE project root.

But, as it's written in https://www.typescriptlang.org/docs/handbook/tsconfig-json.html,

Any files that are referenced by files included via the "files" or "include" properties are 
also included
. Similarly, if a file "B.ts" is referenced by another file "A.ts", then "B.ts"
cannot be excluded
unless the referencing file "A.ts" is also specified in the "exclude" list.

 That's why if you first open a file that is referencing your tsx via the imports chain, this tsx will be processed using the tsconfig.*.json  first file is included in and not the nearest tsconfig.json

0
Comment actions Permalink

> That's why if you first open a file that is referencing your tsx via the imports chain, this tsx will be processed using the tsconfig.*.json  first file is included in and not the nearest tsconfig.json

Any plans to fix this behaviour? :)

1
Comment actions Permalink

no, I'm not aware of any... This is a documented behavior of tscompiler

0
Comment actions Permalink

Well, but it causes really big troubles when IDE literally shows you that all your project is full of errors.

Behaviour is unstable and those errors may come at any moment if the structure of tsconfigs in the project is complicated.

1
Comment actions Permalink

By the way I did not find any place with warnings about it, if I didn't open this topic I would probably switch to VScode. It seems for me this is a strange policy.

1
Comment actions Permalink

This has been driving me crazy for three whole days now.

I recently split an Angular application into two separate applications within the same project and started seeing these errors about paths defined in tsconfig.json not being found, even though the project compiles and serves just fine.

I was convinced that I messed up the config when I separated the applications, and I've been trying every possible tweak to the main tsconfig.json and the two individual applications' tsconfig.app.json files, I've been invalidating the cache and restarting the IDE, I tried it in just WebStorm rather than IntelliJ (even though they're basically the same thing).  I even created a new project with two simple, brand new Angular applications in it and saw exactly the same problem!

I've been searching for the answer to this and I've been reading and re-reading the official TypeScript documentation about module resolution and config files, and running tsc with --showConfig and --traceResolution and nothing stood out.

I luckily just finally stumbled upon this thread and read this comment, closed down all of my open files and opened the single file that had the import error and then it went away:

> It's not always obvious, but the order in which you open the files can matter...

Madness.

</rant>

 

Anyone who opens a file expects path resolution to happen based on that file's nearest tsconfig, not based on the tsconfig nearest to the first file that you opened.

I opened my project in VS Code and the problem does not occur there, so I don't think it's fair to say that this is expected behaviour and is not a bug in IntelliJ/WebStorm.

This is really terrible behaviour.  Please raise this as a bug and fix it.

1
Comment actions Permalink

Elena Pogorelova will you answer this last comment? Because I also think this behaviour is definitely a bug. 

0
Comment actions Permalink

Hi, I had similar issues. All import paths without .ts at the end of the import had red underline, but it would compile. When I added .ts, red line disappeared but it would not compile. The biggest issue was it did not show me the actual errors in my code. I had to open Visual Studio Code to fix those. 

I played with Deno before in a different project.  And Deno expects .ts to be at the end of the import. So I disabled Webstorm Deno plugin and the issue went away. For the devs, I know for sure I do not use and I did not enable Deno plugin for that particular project.

I hope this helps someone.

0

Please sign in to leave a comment.