Hey guys in my nx works…

2 minute read

Hey guys, in my nx workspace, when I want to import something from a lib, webstorm autocompletes this import using the definition in tsconfig eg @myorg/lib1 which is great. however, if I want to import the same thing inside that library, webstorm also uses @myorg/lib which leads to circular imports. can I make webstorm to rather use the relative path ../services/myservice in this case?

Responses:

im also curious about this. really annoying always creating circular deps haha

Interesting. If I’m understanding you correctly, then VSCode is doing this automatically for me. So when I try to use something from within the same lib, the autocomplete imports it with a relative path, but if it’s in another lib I get the @myorg/lib

That is what we want in WebStorm but webstorm always uses ts alias if it exists.

Interesting, so VSCode IntelliSense seems to be slightly more intelligent about this. (badumtssss)

:disappointed:

But a couple of devs on my team are actually using WebStorm, so I’d love to hear if you guys find some solution to this :sweat_smile:

i dont wanna be that guy, but we should use absolute paths instead. In your tsconfig you are able to set your baseurl. I use vscode and it picks up my folder structure. I repented after reading this article https://adrianfaciu.dev/posts/module-imports/

I actually agree with that concept, but the nx lint rules flag it as a circular dependency if you depend on the lib you’re in. Personally I just keep the libs as small as possible (or at least as flat as possible) so the relative imports aren’t really a problem. For the apps I have a custom path in the root.

Got it. The article also says that relative paths in the same folder are ok. I was thinking that every lib and app has a tsconfig that extends the root tsconfig, maybe setting the bseurl there would overwrite the imports. Havent tried it yet.

I tried some messing around with the baseUrl and everything was a mess :sweat_smile: I added "$*": ["apps/*"], to paths in the root tsconfig, so I can use absolute imports within apps by doing import X from '$appName/…'; , in theory one could do something similar for the libs

Ok facinating. This thread helped me figure out a circular dependency error I’ve been getting all day while trying to review a PR from another dev (that happens to use webstorm) :see_no_evil:

Updated: