Cannot find module 'xxxx' when using path mapping #762

mei-rune · 2018-04-14T05:04:40Z

I have searched through existing issues
I find Can't find module about non-relative path #545 and Can fix Intellisense and go to definition for absolute path #423, but error is still exists.
I have read through docs
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

HerringtonDarkholme · 2018-04-14T15:20:26Z

Can you reproduce it in plain TypeScript?

mei-rune · 2018-04-15T06:16:38Z

@HerringtonDarkholme you open https://github.com/vuejs/vetur/files/1910017/example.zip

HerringtonDarkholme · 2018-04-16T08:32:50Z

I cannot reproduce it.

ghost · 2019-04-09T14:05:16Z

Same problem here.
Can anybody help?

Without @ it works:

octref · 2019-04-09T16:11:55Z

https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cant-recognize-components-imported-using-webpacks-alias

ghost · 2019-04-10T06:39:12Z

https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cant-recognize-components-imported-using-webpacks-alias

same problem 😥

AtofStryker · 2019-04-18T03:25:07Z

this also seems to be a problem on our end as well

kinghat · 2019-04-25T03:46:41Z

im getting this as well:

https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cant-recognize-components-imported-using-webpacks-alias

this didnt seem to work for me:

// webpack
module.exports = {
  resolve: {
    alias: {
      '@': 'src'
    }
  }
}```

octref · 2019-04-26T03:54:35Z

@k1nghat I clarified the doc, sorry:

// If you have below Webpack config
module.exports = {
resolve: {
  alias: {
    '@': 'src'
  }
}
}

// You need such tsconfig.json
{
"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": [
      "src/*"
    ]
  }
}
}

kinghat · 2019-04-26T05:06:19Z

i get this when i put it into vue.config.js and try to build:

ERROR Invalid options in vue.config.js: "resolve" is not allowed
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

octref · 2019-04-26T05:31:38Z

@k1nghat No, my point was "if you have such webpack.config.js" you need to create a tsconfig.json in your project root. vue.config.js is an abstraction on top of webpack.config.js.

Can you clone this repo https://github.com/octref/veturpack to create a repro case?

kinghat · 2019-04-27T02:31:12Z

@k1nghat No, my point was "if you have such webpack.config.js" you need to create a tsconfig.json in your project root. vue.config.js is an abstraction on top of webpack.config.js.

Can you clone this repo https://github.com/octref/veturpack to create a repro case?

since the last couple updates pushed recently i havent seen the issue in my project or the cloned veturpack repo.

octref · 2019-04-27T16:30:12Z

@Grewamor Are you on Windows too?

I start to doubt it's because Windows's specific path handling problem.

ghost · 2019-04-27T18:58:22Z

Yes, windows

vladfrangu · 2019-05-13T17:51:53Z

I also encounter this issue, but seems like a window reload fixes it, so surely it isn't just Windows being Windows, right? 😅

nexorianus · 2019-05-16T07:58:08Z

I also encounter this issue, but seems like a window reload fixes it, so surely it isn't just Windows being Windows, right? 😅

A window-reload does fix the Problem!
And it's not only a Windows problem... getting the same behavior on Mac.

forbjok · 2019-05-20T18:32:35Z

I'm having this issue as well with everything except the .vue modules.
I already have the "@/*" path in tsconfig.json (it was there by default when I created the project, I believe), and no amount of restarting VSCode or even doing "git clean -fdx" and reinstalling npm packages seems to make any difference. Getting the same thing both on my laptop and my desktop machine.

sermunar · 2019-06-03T10:32:42Z

I am facing this issue as well in .vue files

issue in .vue files

no issue in .ts files

iliiliili · 2019-06-10T10:38:43Z

same

just for disable this warnings i use direct path

cyberbit · 2019-06-11T14:08:03Z

I am also experiencing this issue on Mac.

VS Code: 1.35.0
Vetur: 0.21.0

In a typical generated Home.vue:

waghcwb · 2019-06-12T16:30:26Z

I'm having the same issue, on Windows

PatricNox · 2020-10-26T08:33:07Z

#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 · 2020-10-26T09:03:43Z

#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 · 2020-10-26T18:57:14Z

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 · 2020-10-27T03:20:14Z

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 · 2020-10-27T14:28:26Z

@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 · 2020-10-28T02:06:07Z

@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 · 2020-11-04T06:13:34Z

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

duck-dev-go · 2020-11-18T19:13:16Z

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

I was already doing this and it does not work. It is driving me nut's. Anyone found a solution already?

wuxiii · 2020-12-06T15:35:33Z

如果你是中文环境，请不要把工程文件夹放在有【中文】或者【带空格】的目录文件夹中，在中文环境下刚开始是正常的，过段时间就会出错。出错原因不明。
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

it works for me. just make sure your workspace is the root directory of your project

diegobelfiore · 2020-12-07T15:22:15Z

I get the "Cannot find module ___ or its corresponding type declarations" error in Vetur, but the project itself compiles and works just fine. I don't get this error in .ts files, only in .vue files (using the same reference path). So everything works, but I don't get type safety in .vue files because anything I import looks like an 'any' type.

yoyo930021 · 2020-12-07T15:26:23Z

I get the "Cannot find module ___ or its corresponding type declarations" error in Vetur, but the project itself compiles and works just fine. I don't get this error in .ts files, only in .vue files (using the same reference path). So everything works, but I don't get type safety in .vue files because anything I import looks like an 'any' type.

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.

And check path alias first char isn't slash for #2525

pabloalvzal · 2021-04-10T06:51:31Z

I experienced the same problem as soon as I needed to move my root directory into a ./src directory (eg. nuxt deployment in firebase). Namely, all my @/components/MyComponent.vue could not be found and I could no longer navigate to them.

Workaround (not a solution) for VS Code
If I open VS code directly from the ./src directory as your root directory everything worked for me again. This was acceptable for me because, during development, I only need to work on this directory.

So instead of this:
cd /Users/myuser/projectName && code .

I did this:
cd /Users/myuser/projectName/src && code .

yoyo930021 · 2021-04-10T06:54:00Z

I experienced the same problem as soon as I needed to move my root directory into a ./src directory (eg. nuxt deployment in firebase). Namely, all my @/components/MyComponent.vue could not be found and I could no longer navigate to them.

Workaround (not a solution) for VS Code
If I open VS code directly from the ./src directory as your root directory everything worked for me again. This was acceptable for me because, during development, I only need to work on this directory.

So instead of this:
cd /Users/myuser/projectName && code .

Do this:
cd /Users/myuser/projectName/src && code .

Where are your tsconfig.json/jsconfig.json?
You can keep in the opened project root or use vetur.config.js

eddow · 2021-04-10T08:56:59Z

Facing the same problem (ie. having 2 tsconfig.json: one for the client, one for the server), I found this vetur configuration, but I can't really make it work.

Is it a dead-end or am I just clumsy at configuration?

EDIT: As a workaround, what I ended up doing was to configure my root tsconfig for my client application, and letting in the server app a tsconfig with a "extends": "../../tsconfig.json",, re-setting the server-side specific configuration

ghtali · 2021-04-21T17:22:04Z

I have searched through existing issues
I find Can't find module about non-relative path #545 and Can fix Intellisense and go to definition for absolute path #423, but error is still exists.

I have read through docs

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

=============================
This is just an alternative way to bypass the error and mostly for testing purposes!

Use absolute path like :

Instead of:

===============

Extra tip:

Please keep in mind that you don't need to use .ts to import them like .vue files, like :

Update: Since Vetur causing this problem, this is just an alternative and temporary way for mapping problem if you want to test and run the project.

sinner · 2021-05-07T14:16:07Z

If you set the language to js in your script tag, the import errors disappear. Don't know why.

<script lang="js">
...
</script>

HoPGoldy · 2021-06-11T05:16:46Z

If you also have this issue in the .ts file, check your ts.config.json:

bad

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

good

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

avinoamsn · 2021-06-21T06:52:07Z

Please use absolute path like this:

@ghtali while this is a valid means of circumventing the issue, the question is about resolving the pathmapping error.

ghtali · 2021-06-21T07:12:55Z

Please use absolute path like this:

@ghtali while this is a valid means of circumventing the issue, the question is about resolving the pathmapping error.

@avinoamsn That's right but since Vetur causing this error, this could be a temporary fix to run your code. I didn't say that using absolute path will fix the problem but it's an alternative to avoid facing mapping problem.

lucassimines · 2021-06-23T14:14:15Z

I was facing this issue, because my Vue Client is inside admin folder and has a tsconfig.json inside this folder. So the path inside the tsconfig.json file is not recognized by Vetur if it's not in the root folder. All I had to do was to create a new tsconfig.json file inside the root folder and paste the following:

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

matthew-dean · 2021-06-30T15:46:17Z

I encountered this issue and this comment helped ~~me to diagnose and solve it~~. --> edit: not solved

Essentially, I had a monorepo set up that didn't have a root-level tsconfig.json, which Vetur apparently requires. After I set up a tsconfig.json in the root, and then set up an extends in the tsconfig.json in my package folder, and rebooted VSCode, then Vetur was able to resolve paths.

So, I think there's a Vetur bug around resolving sub-projects (sub-folders with tsconfig.json files)

UPDATE: This apparently only fixed it for .vue files, for which I had a shim to help resolve. However, this is still broken:

<script lang="ts">
// Vetur can't resolve, even though TS / Webpack can resolve just fine
import { createClient } from '@/plugins/contentful'

References: sequelize/sequelize#7840 (comment) vuejs/vetur#762 (comment) https://github.com/Dmitriy-91/darquest1-18/blob/master/darquest/src/store/index.js

eyedean · 2021-08-06T20:56:54Z

In case your project's `tsconfig.json` is not in the root folder of VS Code

Vetur might not pick up the tsconfig.json automatically if it's in the subdirectories. You have to manually guide Vetur -- https://vuejs.github.io/vetur/guide/setup.html#advanced.

TL;DR: add the following to vetur.config.js in the root of the repo (that you open in VS Code).

module.exports = {
    projects: [ "./path/to/project/which/has/tsconfig.json" ]
};

dudintv · 2021-08-17T09:40:38Z

In case your project's tsconfig.json is not in the root folder of VS Code

Vetur might not pick up the tsconfig.json automatically if it's in the subdirectories. You have to manually guide Vetur -- https://vuejs.github.io/vetur/guide/setup.html#advanced.

TL;DR: add the following to vetur.config.js in the root of the repo (that you open in VS Code).
module.exports = {
    projects: [ "./path/to/project/which/has/tsconfig.json" ]
};

Unfortunately, this way I got some issues with VSCode & Prettier, like disabling code folding and Prettier for vue files.
I came up with this, working for me:

module.exports = {
  projects: ["./path/to/project"],
};

resuta566 · 2021-10-04T19:06:19Z

why it doesn't work on the template?

I'm using nuxt.js/vue.js 2.6.14

yoyo930021 · 2021-10-05T03:23:49Z

why it doesn't work on the template?

I'm using nuxt.js/vue.js 2.6.14

Typescript don't support svg file.
You only need to add a svg.d.ts in project source root.

declare module '*.svg';

yoyo930021 · 2021-10-05T03:26:07Z

Everyone encounters different problems:

typescript's original design
vetur bugs

I will lock this issue.
If you have any problem, you can refer top comments.
After confirming that there is a problem, open a new issue.

HerringtonDarkholme closed this as completed Apr 16, 2018

HerringtonDarkholme added the need-more-info label Apr 16, 2018

evenfrost mentioned this issue Apr 25, 2018

Can fix Intellisense and go to definition for absolute path #423

Closed

octref reopened this Apr 10, 2019

octref mentioned this issue Apr 29, 2019

Default FAQ js(ts)config for webpack aliases doesn't work. #890

Closed

3 tasks

octref added this to the April 2019 milestone May 10, 2019

octref changed the title ~~Cannot find module 'xxxx'~~ Cannot find module 'xxxx' for using path mapping May 16, 2019

octref changed the title ~~Cannot find module 'xxxx' for using path mapping~~ Cannot find module 'xxxx' when using path mapping May 16, 2019

octref mentioned this issue May 23, 2019

Dynamic relative import not found #1302

Closed

3 tasks

yoyo930021 mentioned this issue Dec 7, 2020

Fix path alias failed when first char is slash #2525

Merged

yoyo930021 closed this as completed in #2525 Dec 8, 2020

vuejs locked as resolved and limited conversation to collaborators Oct 5, 2021

Cannot find module 'xxxx' when using path mapping #762

Cannot find module 'xxxx' when using path mapping #762

Comments

mei-rune commented Apr 14, 2018

Info

Problem

Reproducible Case

HerringtonDarkholme commented Apr 14, 2018

mei-rune commented Apr 15, 2018

HerringtonDarkholme commented Apr 16, 2018

ghost commented Apr 9, 2019 • edited by ghost Loading

octref commented Apr 9, 2019

ghost commented Apr 10, 2019

AtofStryker commented Apr 18, 2019

kinghat commented Apr 25, 2019

octref commented Apr 26, 2019

kinghat commented Apr 26, 2019

octref commented Apr 26, 2019

kinghat commented Apr 27, 2019

octref commented Apr 27, 2019

ghost commented Apr 27, 2019

vladfrangu commented May 13, 2019

nexorianus commented May 16, 2019

forbjok commented May 20, 2019

sermunar commented Jun 3, 2019 • edited Loading

iliiliili commented Jun 10, 2019

cyberbit commented Jun 11, 2019 • edited Loading

waghcwb commented Jun 12, 2019

PatricNox commented Oct 26, 2020

yoyo930021 commented Oct 26, 2020

major697 commented Oct 26, 2020

yoyo930021 commented Oct 27, 2020

major697 commented Oct 27, 2020

yoyo930021 commented Oct 28, 2020

yes1am commented Nov 4, 2020

duck-dev-go commented Nov 18, 2020

wuxiii commented Dec 6, 2020

diegobelfiore commented Dec 7, 2020 • edited Loading

yoyo930021 commented Dec 7, 2020

pabloalvzal commented Apr 10, 2021 • edited Loading

yoyo930021 commented Apr 10, 2021

eddow commented Apr 10, 2021 • edited Loading

ghtali commented Apr 21, 2021 • edited Loading

Info

Problem

Reproducible Case

===============

Extra tip:

sinner commented May 7, 2021

HoPGoldy commented Jun 11, 2021

avinoamsn commented Jun 21, 2021

ghtali commented Jun 21, 2021

lucassimines commented Jun 23, 2021 • edited Loading

matthew-dean commented Jun 30, 2021 • edited Loading

eyedean commented Aug 6, 2021

In case your project's tsconfig.json is not in the root folder of VS Code

dudintv commented Aug 17, 2021

In case your project's tsconfig.json is not in the root folder of VS Code

resuta566 commented Oct 4, 2021

yoyo930021 commented Oct 5, 2021

yoyo930021 commented Oct 5, 2021

ghost commented Apr 9, 2019 •

edited by ghost

Loading

sermunar commented Jun 3, 2019 •

edited

Loading

cyberbit commented Jun 11, 2019 •

edited

Loading

diegobelfiore commented Dec 7, 2020 •

edited

Loading

pabloalvzal commented Apr 10, 2021 •

edited

Loading

eddow commented Apr 10, 2021 •

edited

Loading

ghtali commented Apr 21, 2021 •

edited

Loading

lucassimines commented Jun 23, 2021 •

edited

Loading

matthew-dean commented Jun 30, 2021 •

edited

Loading

In case your project's `tsconfig.json` is not in the root folder of VS Code

In case your project's `tsconfig.json` is not in the root folder of VS Code