VSCode/tsconfig paths issue - files get pulled in but I get "Cannot find module" in the editor

Question

I've been having this strange issue since I've started working on this project a while back. In my various Angular components/classes/etc. I'm pulling in other modules and files using import. For any of these that use the base path @ symbol, I'm getting an error in VSCode (note: @angular/core and other packages work... issue is just with the paths). What's weird is that I can compile and run the application with no issues... the imports all get pulled in successfully despite the warning.

I've just been ignoring this issue for a while, but it causes one issue that's very inconvenient... if I try to go to the definition of, for example, an object that's in one of the imported modules, VSC doesn't bring me to that file because it can't seem to find it.

Everyone on my team uses the exact same code base (and the same tsconfig file) in VSCode without experiencing this problem. So it doesn't seem to be an issue with the tsconfig file or codebase setup itself, but rather something up with my VSCode itself. I've scoured StackOverflow and elsewhere for solutions but haven't had any luck. Any suggestions would be much appreciated.

Import example (top of an Angular ts file):

import { SigningAction } from '@middlemass.signing/dto/signing-action';

Here's the warning I get when hovering over any import with a path shortcut prefix:

Cannot find module '@middlemass.signing/dto/signing-action' or its corresponding type declarations.

tsconfig.json:

{
    "compileOnSave": false,
    "compilerOptions": {
      "outDir": "./dist/out-tsc",
      "sourceMap": true,
      "declaration": false,
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "suppressImplicitAnyIndexErrors": true,
      "target": "es5",
      "resolveJsonModule": true,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "typeRoots": [
        "node_modules/@types"
      ],
      "lib": [
        "es2017",
        "dom"
      ],
      "module": "es2015",
      "baseUrl": "./",
      "paths": {
        "@middlemass.sending/*": [
          "projects/middlemass-sending/src/*"
        ],
        "@middlemass.sending/shared/*": [
          "projects/middlemass-sending/src/shared/*"
        ],
        "@middlemass.sending/utils/*": [
          "projects/middlemass-sending/src/shared/utils*"
        ],
        "@middlemass.sending/services/*": [
          "projects/middlemass-sending/src/services/*"
        ],
        "@middlemass.sending/dto/*": [
          "projects/middlemass-sending/src/dto/*"
        ],
        "@middlemass.sending/env/*": [
          "projects/middlemass-sending/src/environments/*"
        ],
        "@middlemass.sending/styles/*": [
          "projects/middlemass-sending/src/scss/*"
        ],
        "@middlemass.sending/locale/*": [
          "projects/middlemass-sending/locale/*"
        ],
        "@middlemass.signing/locale/*": [
          "projects/middlemass-signing/locale/*"
        ],
        "@middlemass.signing/dto/*": [
          "projects/middlemass-signing/src/app/core/dto/*"
        ],
        "@middlemass.signing/services/*": [
          "projects/middlemass-signing/src/app/core/services/*"
        ],
        "@middlemass.signing/shared/*": [
          "projects/middlemass-signing/src/app/shared/*"
        ],
        "@middlemass.signing": [
          "projects/middlemass-signing/src"
        ],
        "@middlemass.signing/*": [
          "projects/middlemass-signing/src/*"
        ],
        "@middlemass.common": [
          "projects/middlemass-common/src"
        ],
        "@middlemass.common/*": [
          "projects/middlemass-common/src/*"
        ]
      }
    },
    "angularCompilerOptions": {
      "fullTemplateTypeCheck": true,
      "strictInjectionParameters": true,
      "preserveWhitespaces": false
    }
  }

Is everyone using the same version of VS Code? Also, is your VS Code using its own typescript version or your project's typescript version? To check then, when viewing a .ts file, on the bottom right of the screen it will say your TypeScript Version. Clicking it will allow you to change between the one bundled with VS Code vs the one your app has included. I've ran into odd warnings like this in the IDE before. — cjd82187
– cjd82187, Commented Aug 12, 2020 at 1:14
@cjd82187 - thanks for the reply! I haven't checked on any of this yet but I'm about to do so. I appreciate it! — Timbo773
– Timbo773, Commented Aug 12, 2020 at 14:18

Timbo773 · Accepted Answer · 2020-08-13 14:03:15Z

So this ended up not really being either a VSCode or tsconfig issue. I can't believe I've missed this from day one, but basically this code base consists of three separate projects in one root directory. Day-to-day, my team and I will work on one of the three projects at a time and I've always opened the specific project directories when doing development. The tsconfig file exists in the root directory. Even though the separate projects have their own tsconfig files that inherit the root one, not having the root directory opened in VSCode was causing this issue.

So basically the code base is set up:

Projects Folder (root with the "master" tsconfig)
   --Project I (with its own tsconfig that extends the root tsconfig)
   --Project II (with its own tsconfig that extends the root tsconfig)
   --Project III (with its own tsconfig that extends the root tsconfig)

And I just needed to open the Projects folder in VSCode for the base path shortcuts to work. Before I assumed that because the child project folders had their own tsconfig files that extended from the root, it would be ok just to open those individual folders in VSC, but this was not the case. I had to have the root folder open which contains the master tsconfig file.

One drawback to doing this is that searching for files or code within one project could return results from the other projects. However, there are some modifications you can make to your VSC workspace settings to prevent this, ex:

"search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true,
    "**/projects/project1": true,
    "**/projects/project2": false
    "**/projects/project3": false
  }

With this setup, if you're in project1 you'll only get search results in project1... you could just modify this pattern for whichever project you're working in.

Collectives™ on Stack Overflow

VSCode/tsconfig paths issue - files get pulled in but I get "Cannot find module" in the editor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related