In VS Code: [ts] Cannot find module '@src/xxx'

Question

So, I'm using this tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "module": "ES6",
    "moduleResolution": "node",
    "outDir": "./lib/",
    "paths": {
      "@src/*": ["src/*"]
    },
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "ES6"
  },
  "include": [
    "global.d.ts",
    "src/**/*.ts"
  ]
}

Where you can see the alias @src is defined for my code.

tsc/webpack have no problem building everything but while editing in VS Code, I can't get rid of this error message when I import something as

import { xxx } from '@src/xxx';

Anyone with the same problem? For me, it's weird to see this because if it's compiling/building properly (from tsc and webpack), it means the configuration is correct. So why VS Code is displaying this error msg? It's just annoying but I wanna solve it.

tsconfig.json file is also using the standard name (no custom -p option for tsc) so, VS Code should be able to read it automatically, right? Or any extra configuration is needed for the IDE?

Thanks for the response. I wonder if they fixed VS Code? I found that I needed to define *.gif in typescript. After that it imported fine for me. with an alias. My other question has my full config and my solution in case it helps you: stackoverflow.com/questions/54880363/… — Brandon
– Brandon, Commented Feb 27, 2019 at 21:44
4 years and 10 months later, this is still a problem, sigh! Maybe it works in more situations now, but it does not work for my in a trivial (hello world type) example of a monorepo with npm workspaces. — bikeman868
– bikeman868, Commented May 23, 2023 at 2:38

Oleksandr Oliynyk · Accepted Answer · 2020-02-27 11:36:54Z

48

I had the same issue. In my case running Cmd+Shift+P > Typescript: Restart TS Server did the trick and error message disappeared

answered Feb 27, 2020 at 11:36

Oleksandr Oliynyk

8969 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

danikaze Over a year ago

oh I´m sorry, that didn´t fix it... but since I fixed it from last time, let me post what worked for me as an answer :)

Иван Яковлев Over a year ago

this problem appears when you create new file in a deep nested file structure and use typescript aliase on it. And thanks, not the best solution but it works)

Cezar Cobuz Over a year ago

In my case, I accidentally created two files with the same name: RewardsInfoDialog.tsx and RewardsInfoDialog.ts. Removing one solved the issue

danikaze · Accepted Answer · 2022-07-31 14:18:21Z

9

After long time (I forgot about the question already...) I made it work (don't know if even was possible when the original question was posted).

I'll write here what I did, in case it can help other people :)

Basically, I needed the following:

1. Define paths in `tsconfig.json`

This was in the original question, but including it here too for completion:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src": ["src"],
      "@src/*": ["src/*"],
    }
}

2. Install `tsconfig-paths`

npm i -D tsconfig-paths

If you are using webpack add tsconfig-paths-webpack-plugin too and add the plugin in your webpack.config.js like this:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // ...
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
    plugins: [new TsconfigPathsPlugin({ configFile: 'tsconfig.json' })],
  },
};

If you are using NextJS the configuration for the plugin goes like this in next.config.js:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  webpack: (config) => {
    config.resolve.plugins.push(
      new TsconfigPathsPlugin({ configFile: 'tsconfig.json' })
    );

    return config;
  },
};

I'm not sure if it was just VS Code being improved (therefore my problem was fixed automatically in this one year and a half that passed since I posted the question), but this is what I'm using now and is working fine. Hope it's helpful for others too :)

Note (2022/07/31 with TS 4.6.4) - TsconfigPathsPlugin is still needed if you try to import non-ts code (i.e. an asset) from TS -by using any other loader-.

Example:

import icon from '@assets/icon.svg';

I've found that the webpack plugin is still required to achieve that.

edited Jul 31, 2022 at 14:18

answered Feb 27, 2020 at 15:12

danikaze

1,6642 gold badges18 silver badges38 bronze badges

3 Comments

Vitaly Leskiv Over a year ago

Didn't work in my case, installed the package but when running my nextjs app it says "Cannot find module 'tsconfig-paths-webpack-plugin'".. what did i miss?

danikaze Over a year ago

you have to install it as well: npm install --save-dev tsconfig-paths-webpack-plugin

cheeze Over a year ago

With Vite, it seems that adding "path" to the root tsconfig.json file did the trick. Meaning no need for step 2 "Install tsconfig.json".

Alex M · Accepted Answer · 2021-12-21 17:35:04Z

4

Nowadays should work out of the box. Just as a side note, make sure the include in your jsconfig/tsconfig is pointing to correct paths, i.e.

// example:
"include": [
  "./**/*.ts",
  "./**/*.tsx"
],

answered Dec 21, 2021 at 17:35

Alex M

2,5681 gold badge27 silver badges41 bronze badges

2 Comments

danikaze Over a year ago

Yeah, things have changed a lot in more than 3 years ;)

danikaze Over a year ago

By the way, TsconfigPathsPlugin is still required for imports other than TS. An example could be importing an non TS asset (i.e. an image) from a TS file by using an alias. In that case the webpack plugin is needed ^^

funerr · Accepted Answer · 2023-03-07 15:51:06Z

0

I needed to change the typescript version to the node_modules one. Like so: https://github.com/kriasoft/react-starter-kit/issues/1982#issuecomment-1201423277

answered Mar 7, 2023 at 15:51

funerr

8,31417 gold badges91 silver badges139 bronze badges

Comments

Souvik Ghosh · Accepted Answer · 2022-12-26 18:48:34Z

-2

Just add the below part to your tsconfig.json file.

"compilerOptions": {
    ...,
    "baseUrl": ".",
 },

Reason: Typescript is not able to identify the Current_Dir of your project. So, whenever you try to start with src, it cannot understand where src is coming from.

answered Dec 26, 2022 at 18:48

Souvik Ghosh

643 bronze badges

1 Comment

danikaze Over a year ago

This doesn't solve anything, and it's included in the original question. By the way, there's already an accepted answer, you might want to check on that ;)

Collectives™ on Stack Overflow

In VS Code: [ts] Cannot find module '@src/xxx'

5 Answers 5

3 Comments

1. Define paths in `tsconfig.json`

2. Install `tsconfig-paths`

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1. Define paths in tsconfig.json

2. Install tsconfig-paths

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related

1. Define paths in `tsconfig.json`

2. Install `tsconfig-paths`