WebStorm does not recognize tsconfig paths

Question

We have a problem where WebStorm complains about some named paths. Everything builds fine with webpack though.

This is our file structure:

apps
  app1
    tsconfig.e2e.json
    src
      tests
        testsuite1
          file.po.ts
libs
  lib1
    src
      index.ts
      libs

Our index.ts for the lib:

export * from './lib';

The paths in our tsconfig.e2e.json:

{
  "compilerOptions": {
    ...
    "paths": {
      "@a/lib1": ["../../libs/lib1/src"],
    }
  }
}

Our import is marked as not found in WebStorm in file.po.ts

import { Mo } from '@a/lib1';

We have enabled TypeScript language service in WebStorm and some other similar imports are working. We are new to TypeScript and WebStorm so perhaps we are missing something.

Lexicology

works for me using a similar setup. Please share a sample project that can be used to recreate the issue (it can be a project with similar folders structure and same tsconfig.*.json files plus several dummy ts files that only include imports/exports and dummy declarations - I don't need your proprietary code) – Heterophony

What version of WebStorm do you use and what OS? – Lexicology

WebStorm 2018.3.4 (latest one), Windows. OS doesn't actually matter here. – Heterophony

Answer 1

You need to restart after adding a new path

I had the same issue; after adding a new path to the tsconfig.json file I needed to restart my Intellij IDEA for it to recognize the path in import statements.

"paths": {
  "@alias/*": ["folder/*"],
},

After restart it stopped underlining the path with a red line:

import { SomeFeatureModule } from '@alias/some-feature/some-feature.module';

---

Check whether the path is relative to the baseUrl

If that is not resolving the issue, control click on the actual alias to see if it is recognized; clicking should bring you to the tsconfig.json file where the path alias is declared. Also check if the actual path is correctly taking the in the compilerOptions configured baseUrl property into consideration. The path should be relative to this base-url.

So for example:

"baseUrl": "src",

This would means that for the example above the existing folder should actually be:

src/folder/*

Entoderm

I restarted after setting the @alias, and this made no odds; I added the baseUrl, and then had to restart again. This is in PhpStorm 2021.1.2 (which I believe is based on WebStorm). – Rancell

In my case, I was forgetting the * (asterisk) after the folder: folder/* – Fugacious

baseUrl was the key for me, thanks! – Procter

Could you please explain why tsconfig paths are even needed to make autocomplete work? How would autocomplete work at all, if I'd use vanilla JS instead of Typescript in my project? – Minutes

Yes I needed to add "baseUrl": "./", in order to use "@src" path – Drizzle

@Drizzle Thanks for your comment, If the answer helped you please upvote the answer. That is better then leaving a comment.. – Entoderm

@MarianKlühspies vanilla only recognizes relative imports. Autocomplete will work with relative imports. typescript paths are apparently a controversial subject especially once you have a monorepo setup. The typescript/Angular team don't think anybody should be using them in libraries for example – Schutz