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

[HerringtonDarkholme]

Can you reproduce it in plain TypeScript?

[mei-rune]

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

[HerringtonDarkholme]

I cannot reproduce it.

[ghost]

Same problem here. Can anybody help?

Without @ it works:

[octref]

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

[ghost]

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

same problem 😥

[AtofStryker]

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

[kinghat]

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]

@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]

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]

@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]

@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]

@Grewamor Are you on Windows too?

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

[ghost]

Yes, windows

[vladfrangu]

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

[nexorianus]

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]

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]

I am facing this issue as well in .vue files

issue in .vue files

no issue in .ts files

[iliiliili]

same just for disable this warnings i use direct path

[cyberbit]

I am also experiencing this issue on Mac.

VS Code: 1.35.0 Vetur: 0.21.0

In a typical generated Home.vue:

[waghcwb]

I'm having the same issue, on Windows

[tingzhong666]

I'm having the same issue, on Windows

[tingzhong666]

Brothers, I've found a temporary solution. Turning off this option is not a good way, but it can make the code look good.

[alex88]

Same issue here:

package.json has

  "vue": {
    "configureWebpack": {
      "resolve": {
        "alias": {
          "@": "src"
        }
      }
    }

tsconfig

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

inspected webpack config from vue ui shows

  resolve: {
    alias: {
      '@': 'src',
      vue$: 'vue/dist/vue.runtime.esm.js'

[tingzhong666]

Today, I emptied the vscode workspace. Open a project, and it's normal, no error.

[zxc122333]

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:

[DavidXenakis]

I'm also having the same issue, and haven't found a workaround yet.

tsconfig:

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

app.vue:

<script lang="ts">
import * as MyStore from '@/store/mystore'

Yields error Cannot find module '@/store/mystore'. Vetur(2307)

If anyone finds a fix for this, I'd be super appreciative.

VSCode: 1.36.0 Vetur: 0.21.1 vue: 2.5.16

EDIT: It looks like the problem resolves if, from VSCode -> File -> Open Folder, I select the root of my Vue app. The Vue app is within a larger monorepo. If I instead Open Folder the folder above the root of my Vue app, the problem persists. What is happening here? Is it looking for tsconfig.json in the root of my workspace? Or does it walk up the directory tree from each file, looking for tsconfig.json?

[Serhansolo]

@DavidXenakis Nice find! I can confirm what he said in his EDIT ... Fix please!

[eyedean]

I just found it doesn't pick up the tsconfig.json changes immediately. You need a simple VSCode restart (command+shift+p and then Reload Window).

That fixed it for me. :)

[sss721]

Any fix for this bug?

[bugproof]

[bhillis]

I can confirm that changing the order of folders in the workspace fixes the issue. It appears that if the Vue app is not the first folder in the workspace then the error occurs.

[robsonsobral]

Try t o create a file named jsconfig.json (not a tsconfig.json) on project root:

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

[cyberbit]

Can also confirm, changing the order of folders in my workspace solved the problem. Thanks, @bhillis!

[sss721]

@bhillis Reordering works!! But it is a weird fix.

[jolexxa]

Hey all, I seem to be experiencing the same thing on macOS 10.14.6 with VSCode 1.38.0 and Vetur 0.22.2.

I have a single jsconfig.json in my root project directory for my javscript project. No other workspaces or folders open.

Basically, if I want to leave Vetur's vetur.validation.script set to true I get the following with a webpack lazy import/load in my Vue SFC (single-file-component):

I like to leave Vetur validation on because I can benefit from JSDoc typings to improve my JavaScript experience.

Nothing on this thread has worked for me.

[robsonsobral]

If you are using TypeScript, you need to use the tsconfig.json file.

[jolexxa]

If you are using TypeScript, you need to use the tsconfig.json file.

I'm not using TypeScript. I have the Typescript validation turned on to take advantage of JSDoc hints.

[robsonsobral]

Me too, @josephessin , but it's working for me.

[jolexxa]

@robsonsobral I wish I could say the same. The code base I'm working in is rather large but I might try to to reproduce in a smaller repo

[hiniko]

I don't know if this fits in with the issue mentioned here (especially with the open folder find) but under the FAQ for setting up [js|ts]config.json and webpack it does say that you need the .vue extension if you're importing a SFC. Added this to a couple of import statements and the errors go away for me.

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

I hope that is something that get changed / fixed as that is painful to go and fix everywhere.

[philanderson888]

I can confirm that changing the order of folders in the workspace fixes the issue. It appears that if the Vue app is not the first folder in the workspace then the error occurs.

As mentioned above I trivially found the fix to physically drag my folder to the top of the folder tree so it doesn't look for another ts.config above it. That fixed it for me but that is a slightly worrying fix because it means whatever is causing the underlying issue has not been fixed.

[WhiteExponent]

I am using Emacs 26.1, lsp, and vue-language-server 0.0.61. Getting the same error. I am writing a Nuxt app so the following was already inside tsconfig.json:

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

I get the following error.

EDIT: Could this error possibly have to do with the fact that my tsconfig.json is not at project root, but rather inside a client directory? Or does it not matter?

[abdusamadtv]

Any fixes?

[litt1e-p]

just reopen vs code and it get fixed

[robsonsobral]

EDIT: Could this error possibly have to do with the fact that my tsconfig.json is not at project root, but rather inside a client directory? Or does it not matter?

For me, yes! I had to keep the jsconfig.json at project root.

[rdhelms]

Still having this problem with Vetur 0.22.6, VSCode 1.39.2.

Physically re-ordering the folders in the workspace can help unless multiple folders are Vue projects, in which case the last one shows the errors.

Opening each folder in its own workspace works and no errors are shown. Basically with the current state of things I just have given up on using a VSCode workspace with multiple folders.

Might be related: https://github.com/vuejs/vetur/issues/815

[robsonsobral]

Sharing a little light:

https://vuejs.github.io/vetur/setup.html#project-setup

https://lmichelin.fr/vscode-intellisense-jsconfig-vue-js-nuxt-js-absolute-imports/

[MickWang]

Upgrade and restart vscode works.

[jvik]

Can confirm what others have been mentioning. If I open the vue-client folder inside my monorepo imports are working fine. If I open the whole monorepo, Vetur is complaining about the imports.

tsconfig.json

{
    "files": ["src/typings/shims-vue.d.ts"],
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "experimentalDecorators": true,
        "module": "esNext",
        "jsx": "preserve",
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "importHelpers": true,
        "allowJs": true,
        "baseUrl": ".",
        "paths": {
            "~/*": ["./*"],
            "src/*": ["src/*"]
        },
        "esModuleInterop": true,
        "lib": ["es2015", "esnext", "dom", "dom.iterable", "scripthost"]
    },
    "include": ["src/**/*.ts", "src/**/*.vue", "test/**/*.ts", "./typings"],
    "exclude": ["node_modules/**", ".quasar", "dist"]
}

edit:

It seems like multi-root and sub-folder support is on the roadmap for v 1.0 https://github.com/vuejs/vetur/issues/873

As @rdhelms suggests, this is probably related to #815