Cannot find module 'xxxx' when using path mapping

[mei-rune]

• [x] I have searched through existing issues I find #545 and #423, but error is still exists.
• [x] I have read through docs
• [x] I have read FAQ

Info

• Platform: Win
• Vetur version : 0.11.7
• VS Code version:1.22.1

Problem

Reproducible Case

npm install -g @vue/cli vue create explorer example.zip

[JasonFoglia]

Timeline for fix??

Head melting away!

[jimhucksly]

I have same problem

"compilerOptions": {
    "allowJs": true,
    "moduleResolution": "node",
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "*"
      ]
    }
}

in .ts file it's all right with alias "@"

The problem in .vue file!

[heiyehk]

The folder client contains a vue project created by vue-cli The folder empty contains only a empty tsconfig.json

works fine:

Cannot find module '@/components/HelloWorld.vue':

The only difference is order

gif:

Very effective, solved my problem

[jimhucksly]

The Question is not by theme ... sorry How to enable this notifications in VS Code?

[gammx]

Waiting for the fix here...

[thalesagapito]

So, what I've gathered from all this:

If you're in a monorepo/multi-root setup

At the present time Vetur does not support such use cases. The best you can do is vote for this feature (Multi-root and Sub-folder support) at #873, help implement it or wait for it. And try to follow the team's recommendations, like opening the subfolder directly instead of the project. Vetur will only work if your Vue project is at the top-level.

If you're not in a multi-root setup (your Vue project is at the top-level)

1. Try restarting the window.
2. Double check your root jsconfig.json/tsconfig.json. Make sure you're following the docs on project setup and path mappping.
3. As a last resort, you can use relative paths, e.g. "../../components/my-component.vue"

[136shine]

I solved this problem in .eslintrc.js add '@typescript-eslint/no-var-requires': 0 in the options of rules

[kaangokdemir]

I'm having same issue. Non of any solution solved my problem except using relative paths.

[tobx]

The following worked for me:

My TypeScript client is in the projects subdirectory web. In this subdirectory I have my tsconfig.json. I left the tsconfig.json untouched, but added a new jsconfig.json to the projects root as @robsonsobral suggested. Then I added "baseUrl": "./web", so my jsconfig.json looks like this:

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

You might have to reload the window or restart VSCode.

I do not have a multiroot workspace, but this might work too, if you specify baseUrl correctly. If you have multiple js/ts roots, I guess this will not work.

[jstiers]

For now, the quickest fix for this error is to rearrange your folder structure in VS Code.

To fix:

Manually drag your Vue App's Folder to the top of your opened projects inside of your VS Code workspace.

As mentioned by @cyberbit and @philanderson888

[LuchoSerruya]

I could fix this issue by just appending .vue to file path I was importing from (doc)

So, instead of

import MyComponent from "@/components/MyComponent"

write

import MyComponent from "@/components/MyComponent.vue"

I hope it helps somebody else :pray:

[ikkyu-3]

I solved this problem. The reason was that <script lang="ts"></script> was missing in the Vue file to be imported.

// components/HelloWorld.vue
<template>
...
</template>

<script lang="ts"></script> // added

// index.vue
<template>
...
</template>

<script lang="ts">
import HelloWorld from "@/components/HelloWorld.vue"; // OK
....
</script>

[falcon-lin-development]

it

Well it works for me. After I deleted the import statement and rewrite it. I believe this is the problem of vetur and vscode. Let hope this bug will be fixed in the next update.

[e2goon]

waiting fix here......... 😢

[chrisbchrist]

Using VSCode/Vetur, I receive this error when importing from TypeScript files through an alias, however Vue components seem to work just fine.

In webpack config:

alias : {
  '@store': path.resolve(__dirname, './ClientApp/store')
} 

In tsconfig:

"paths": {
  "@store/*": ["ClientApp/store"]
}

Nothing seems to help. I have an alias for importing components set up identically which has no issues.

[SheldonLaw]

For now, the quickest fix for this error is to rearrange your folder structure in VS Code.

To fix:

Manually drag your Vue App's Folder to the top of your opened projects inside of your VS Code workspace.

As mentioned by @cyberbit and @philanderson888

This really help me!

I open a big folder contains my vue project and get this error.

When I try to open my vue project in VSCode everything work fine!

[bo5o]

I am using vim with vim-lsp and vim-lsp-settings. I was able to solve the problem by making sure the language server is started from the sub-directory where tsconfig.json lives and not the .git/ root, which was the default. Then everything worked fine. For further details see https://github.com/mattn/vim-lsp-settings/issues/212

[jinger7281]

如果你是中文环境，请不要把工程文件夹放在有【中文】或者【带空格】的目录文件夹中，在中文环境下刚开始是正常的，过段时间就会出错。出错原因不明。 DO NOT PUT your project directory into none ascii drictory, or the directory name has a space charactor,if you put your directory into that environment, at beginning, it may be ok, but after some time, it will appear that error indicator. 标签：无法正常识别@，无法正常识别注入的$router,$message等变量 Label: Can't recognize @, can't recgnize $router or $message DI variable

[PatricNox]

[billytunin]

For now, the quickest fix for this error is to rearrange your folder structure in VS Code.

To fix:

Manually drag your Vue App's Folder to the top of your opened projects inside of your VS Code workspace.

As mentioned by @cyberbit and @philanderson888

This fixed it for me. Thank you! :) I had two different projects on the same workspace. I just moved the project, which was having this problem, to the top and that made it work ¯_(ツ)_/¯

[NoHara42]

Hi all, having the same issue. Quick fix mentioned by @cyberbit and @philanderson888 was not successful. I have removed all other repos from my VSCode but still have the issue. Before stumbling upon this thread I created a StackOverflow post describing my issue. Feel free to take a look: https://stackoverflow.com/questions/61426543/cannot-find-module-assets-file-name-here-svg-vue-cli-version-4-2-3-and

Many thanks. Looking forward to a fix!

[srchulo]

I am seeing this as long as I have lang="ts" on my script tag in my component:

<script lang="ts">
import NavBar from '~/components/NavBar'

export default {
}
</script>

[codemonkey800]

So, what I've gathered from all this:

If you're in a monorepo/multi-root setup

At the present time Vetur does not support such use cases. The best you can do is vote for this feature (Multi-root and Sub-folder support) at #873, help implement it or wait for it. And try to follow the team's recommendations, like opening the subfolder directly instead of the project. Vetur will only work if your Vue project is at the top-level.

If you're not in a multi-root setup (your Vue project is at the top-level)

1. Try restarting the window.
2. Double check your root jsconfig.json/tsconfig.json. Make sure you're following the docs on project setup and path mappping.
3. As a last resort, you can use relative paths, e.g. "../../components/my-component.vue"

I've figured out a workaround for this. My company has a monorepo with the client being located a few directories down. You can use multi-root workspaces to get it working, the only requirement is that the Vue project is the first entry in the folders array:

{
  "folders": [
    {
      "name": "Vetur Project",
      "path": "./packages/web"
    },
    {
      "name": "Monorepo",
      "path": "."
    },
  ]
}

I'm not sure how it works internally, but I'm guessing VSCode treats the first project as the root project or something? Vetur sees this and then all of the path mappings and stuff work fine on my end. And because of the workspace, I have access to the rest of the monorepo

I assume this will only work for one Vue project though. If you have multiple Vue packages, then this won't work. You'll either need to create a workspace for each Vue package, or suffer 😢

[ctsstc]

@LucianoFromTrelew adding .vue to the import doesn't resolve the import properly for hinting. It just resolves it to vue typing file which is equally as useless unfortunately (at least this is what happens in my case).

[ctsstc]

@codemonkey800 Thanks that worked for now :) I have actually been using workspaces, but putting it as the first item seems to have fixed it 🎉 I had to modify my workspace file directly as there seems to be no other way to re-order the workspace directories, and then I had to restart VSCode to get it completely working 🎉 This will be a nice work-around while working on an app in a monorepo.

[7kemZmani]

In my case, removing lang="ts" has (weirdly) fixed the problem!

[PatricNox]

@7kemZmani Removing lang="ts"removed the linted errors for me as well, neat!

But I'm afraid that removing the lang attribute may potentionally be causing other problems. Wouldn't it?

Edit: Through simply googling just

lang="ts"

you can quickly stumble upon threads that is about the very same issue that we discuss here.

[codemonkey800]

@7kemZmani It isn't a a fix because the original problem is that TypeScript path mapping isn't working. Removing lang="ts" will treat code in the <script> block as JavaScript

[cuzox]

@codemonkey800 I have a multi-root workspace and I've found myself switching the order of the folders as I'm working on them 🤦‍♂️

[panayotoff]

I have the same problem, but with node_modules package. The package is installed, the code is working, but vetur throws error Cannot find module 'vue-flickity'.Vetur(2307)

[myialine]

I solved this problem. The reason was that <script lang="ts"></script> was missing in the Vue file to be imported.

// components/HelloWorld.vue
<template>
...
</template>

<script lang="ts"></script> // added

// index.vue
<template>
...
</template>

<script lang="ts">
import HelloWorld from "@/components/HelloWorld.vue"; // OK
....
</script>

I had the same issue while using lang=ts. What fixed it for me was adding .vue to the end of the file as @LucianoFromTrelew suggested .

[fengxiaooctober]

This problem is very annoying, would be perfect once it'll supoort monorepo

[wizardnet972]

I also get Cannot find module '@/use/use-boards'. Vetur(2307) error. Possible solution: read the tsconfig.json that closest to the file (not in the root).

boards.vue:

tsconfig:

"paths": {
      "@/*": ["src/*"]
 }

the folder:

[heavenkiller2018]

I have the same problem when use monerepo. recommend to fix it quickly as monerepo is very popular!

[yoyo930021]

Please follow #424, #815

[andy3520]

So, what I've gathered from all this:

If you're in a monorepo/multi-root setup

At the present time Vetur does not support such use cases. The best you can do is vote for this feature (Multi-root and Sub-folder support) at #873, help implement it or wait for it. And try to follow the team's recommendations, like opening the subfolder directly instead of the project. Vetur will only work if your Vue project is at the top-level.

If you're not in a multi-root setup (your Vue project is at the top-level)

1. Try restarting the window.
2. Double check your root jsconfig.json/tsconfig.json. Make sure you're following the docs on project setup and path mappping.
3. As a last resort, you can use relative paths, e.g. "../../components/my-component.vue"

I've figured out a workaround for this. My company has a monorepo with the client being located a few directories down. You can use multi-root workspaces to get it working, the only requirement is that the Vue project is the first entry in the folders array:

{
  "folders": [
    {
      "name": "Vetur Project",
      "path": "./packages/web"
    },
    {
      "name": "Monorepo",
      "path": "."
    },
  ]
}

I'm not sure how it works internally, but I'm guessing VSCode treats the first project as the root project or something? Vetur sees this and then all of the path mappings and stuff work fine on my end. And because of the workspace, I have access to the rest of the monorepo

I assume this will only work for one Vue project though. If you have multiple Vue packages, then this won't work. You'll either need to create a workspace for each Vue package, or suffer 😢

Thank you, this is working for me w/ latest vetur + vscode

[uuf6429]

@andy3520's solution also worked for me.

To the Vetur devs: it seems that this whole thing is based on some configuration assumptions (single root project...) - if getting the whole feature to work in all situations is difficult, maybe at least show some further details in the error message (something like "Cannot find module xxxxxx, searched in yyyy, zzzz." It's incredibly useful to devs to know what magic is going on under the hood....

[Deji69]

Getting the same problem... removing lang="ts" fixes the Vetur error but of course disables TypeScript so is not an option... I don't have a multi-root workspace, just a normal folder-based project. No fix I've found has worked yet.

Never mind... be sure to reload the window between every attempt to fix, apparently that was all I needed.

[robbyemmert]

What would it take to fix this? Do you need help? Please let us know what is needed to fix this issue. This is a real show stopper.

[yoyo930021]

What would it take to fix this? Do you need help? Please let us know what is needed to fix this issue. This is a real show stopper.

I don't think it's a mistake. In fact most of the time it doesn't work simply because the user isn't set up and it's not user-friendly enough.

Here are the steps to make it all work

1. Add (tsconfig.json or jsconfig.json) and package.json in project root
2. Add paths in tsconfig.json or jsconfig.json. more
3. Restart vscode and open project root folder. PS. Vetur can't watch config file now and project root must to have (tsconfig.json or jsconfig.json) and package.json.
4. Check if everything is working

If you follow these steps and it still doesn't work, please open a new issue. It would be nice to have a reproducible project and steps for us.

I've been planning for the future to make Vetur more user-friendly. But not until after the monorepo or together.

[ManfredHu]

In my case, removing lang="ts" has (weirdly) fixed the problem!

it’s can work for me

[major697]

Any ideas ?

[yoyo930021]

Any ideas ?

https://github.com/vuejs/vetur/issues/762#issuecomment-714200659

[PatricNox]

762 is the solution as for now, however not the real solution as this doesn't solve the issue with these types of workspaces:

Workspace 1
-- Repository 1 - Vue
---- <Here we have this issue>
-- Repository 2 - Laravel

The solution as aforementioned is to open repository #1 in its own workspace, there having the package json at the root of the workspace. But not the real solution.

The style of two repos in same workspace is very typical for decoupled solutions and API integrations between two projects.

[yoyo930021]

762 is the solution as for now, however not the real solution as this doesn't solve the issue with these types of workspaces:

Workspace 1
-- Repository 1 - Vue
---- <Here we have this issue>
-- Repository 2 - Laravel

The solution as aforementioned is to open repository #1 in its own workspace, there having the package json at the root of the workspace. But not the real solution.

The style of two repos in same workspace is very typical for decoupled solutions and API integrations between two projects.

This project does not support workspace at this time. It's deviating from the issue. Please follow #2377

[major697]

Any ideas ?

#762 (comment)

This solution not working, I have tsconfig.json with:

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

and still I have an error: Cannot find module '@/components/table/TableComponent.vue' or its corresponding type declarations.Vetur(2307)

[yoyo930021]

Any ideas ?

#762 (comment)

This solution not working, I have tsconfig.json with:

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

and still I have an error: Cannot find module '@/components/table/TableComponent.vue' or its corresponding type declarations.Vetur(2307)

if you set baseUrl? You can provide a reproducible project.

[major697]

@yoyo930021

if you set baseUrl? You can provide a reproducible project.

I have baseUrl. My tsconfig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": [
    "./src/shims-vue.d.ts"
  ]
}

[yoyo930021]

@yoyo930021

if you set baseUrl? You can provide a reproducible project.

I have baseUrl. My tsconfig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": [
    "./src/shims-vue.d.ts"
  ]
}

Please provide a reproducible project. https://github.com/vuejs/vetur/blob/master/.github/NO_REPRO_CASE.md Otherwise we don’t have enough information to help you.

[yes1am]

In my cases, add file extension solve the problem

bad:

import Hello from '@/component/Hello'

good:

import Hello from '@/component/Hello.vue'

see: https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cannot-recognize-my-vue-component-import-such-as-import-comp-from-comp