My VS Code says that it can't find an import even though my WebPack build still works.

Here is the import...

import * as tf from '@tensorflow/tfjs';

and the message from VS Code:

Cannot find module '@tensorflow/tfjs'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

I have read something about path aliases which can be set up in the tsconfig.json to shorten long paths to modules. But if this is a path alias and I don't have it configured in my tsconfig.json, how does WebPack know where the module is located?

I also read that the convention for path aliases is to start with an "@" but the folder in the "node_modules" itself is called "@tensorflow", so i don't know if it really is a path alias and if not, maybe WebPack magically knows that it has to search in "node_modules" for this module?

As you can see i'm really confused about this and i would be greatfull if somebody could clear this up for me and explain what i must do to stop VS Code from plaining about the import.

My VS Code says that it can't find an import even though my WebPack build still works.

Here is the import...

import * as tf from '@tensorflow/tfjs';

and the message from VS Code:

Cannot find module '@tensorflow/tfjs'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

I have read something about path aliases which can be set up in the tsconfig.json to shorten long paths to modules. But if this is a path alias and I don't have it configured in my tsconfig.json, how does WebPack know where the module is located?

I also read that the convention for path aliases is to start with an "@" but the folder in the "node_modules" itself is called "@tensorflow", so i don't know if it really is a path alias and if not, maybe WebPack magically knows that it has to search in "node_modules" for this module?

As you can see i'm really confused about this and i would be greatfull if somebody could clear this up for me and explain what i must do to stop VS Code from plaining about the import.

• javascript
• typescript
• webpack
• visual-studio-code

• native imports (not using a bundler like Webpack) require a valid relative/absolute path and the file extension. A path alias is a Webpack thing. – Randy Casburn Commented Oct 25, 2020 at 20:22
• 1 Does this answer your question? Make VS code read webpack.config and recognize path with alias? – Randy Casburn Commented Oct 25, 2020 at 20:24

1 Answer 1

Found the solution on my own.

I only found stuff about defining the aliases in the tsconfig.json expclicitly in the "path" option, but this couldn't be the answer to my problem because in my other Angular projects there is nothing like this defined even though I'm using @Angular imports there a lot without this problem.

But then I found this in my Angular project "moduleResolution": "node".

As stated in othe typescript documentation:

However, resolution for a non-relative module name is performed differently. Node will look for your modules in special folders named node_modules.

And behold, it works. Yes I could have probably tried this earlier, since its written in the message from VS Code from my question, but i though this was something for only node.js specific projects and I didn't read about this anywhere.