Vue-cli: Typescript: IDE reports TS2307: Cannot find module error for Vue components imports

[wujekbogdan]

Version

3.0.0-beta.9

Reproduction link

https://pastebin.com/N5A5uWGv

Steps to reproduce

• Install Vue with vue-cli,
• Choose Typescript support
• Open any file that imports *.vue files

What is expected?

No errors are reported

What is actually happening?

IDE reports TS2307: Cannot find module error for Vue components imports. Imports are higlighted in red.

---

I've already reported this error here: https://github.com/vuejs/vue-class-component/issues/219 because I thought that it is a vue-class-component issue, but it's not. It's a configuration issue.

Putting the following vue-shim.d.ts declaration file under my ./src directory solves the problem:

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

[weixiao-huang]

Even though I don't know the reason, but this error may be caused by the new version of shims.d.ts. The new version is below:

import Vue, { VNode } from 'vue';

declare module '*.vue' {
  import Vue, { VNode } from 'vue';
  export default Vue;
}

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

However, just change it to the old version (like beta-6.0)

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

You can resolve the modules

[yyx990803]

This is weird because the build actually works fine, it's only the IDEs complaining.

/cc @ktsn @HerringtonDarkholme any idea why importing Vue at the root level in shims.d.ts breaks the *.vue imports?

[HerringtonDarkholme]

the build actually works fine

ts-loader has special handling for Vue file which doesn't affect IDE.

The workaround is to split declare module and declare global into two separate files.

The first declare module is called ambient module, which is used to describe modules written in JavaScript.
The second declare global is called (external) module, which is a TypeScript specific module system designed before ES-module. Global types like Array and JSX.Element resides in this module type.

And finally it seems that TS cannot mix up two modules, sadly. The compiler thinks one file has one single module type. So the error occurs.

[wujekbogdan]

@HerringtonDarkholme

Thanks for the explanation. I knew that creating a separate file solves the problem (I found it by accident) but I didn't have the slightest idea why it helps.

[kubukoz]

Hey @yyx990803, is a release with the fix for this published? I manually made the change from 51c8090 in my project, but the IDE still glows red, so I'd like to see if a newly generated project would work...

[wiseman]

I see the error in VSCode but also get this error when I do npm run serve using vue 3.0.0-rc.5:

ERROR in /Users/wisej041/Dropbox/Disney/src/aici/tmp/vuecli-ts/src/components/HelloWorld.vue
35:22 Cannot find module './HelloSky'.
    33 | <script lang="ts">
    34 | import { Component, Prop, Vue } from 'vue-property-decorator';
  > 35 | import HelloSky from './HelloSky';
       |                      ^

Should the fix for the issue showing up in VSCode also fix it in npm run serve?

[ocoka]

Hello! How do you guys found that Typescript accepts glob pattern for modules name at all in declare expression? Just can`t find it in Typescript specs
sorry for off topic, can't stop my curiosity !

[Cookizza]

Sorry to resurrect, but this still pops up.

I've actually put a // @ts-ignore on it, and it's compiling fine..

[WalkHard95107]

I also encountered the same problem, have you solved it?

[innocenzi]

I also have this issue. Using Vue 2.6.10.

[medeman]

This is happening when the .vue file extension is emitted from the import statement (i.e. import MyComponent from '@/components/MyComponent' instead of import MyComponent from '@/components/MyComponent.vue'). Haven't figured out how to make it work without the file extension.

[viT-1]

@medeman I am not using cli. Adding shim-vue.d.ts to the project & .vue extension to path of importing file not solved this problem for me =(
and setup vue-ts-plugin is not helped too =(
I am not limited to VS Code, but checking this error on console with tsc & eslint commands.

[viT-1]

And I forced to dance with .vue files only because of unit testing (@vue/test-utils can't mount vue-class-component (.ts files with string template)) =(

I use SystemJS & ES6 bundling & module resolving (here my project).

[viT-1]

By the way is need to check that your ts code in component exported default.

[fyllepo]

Still an issue it seems!

I added the following into index.d.ts in project root, works for now.

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

[viT-1]

And I forced to dance with .vue files only because of unit testing

For testing in jest I'm not need in .vue files. Solved.

[a-menshchikov]

I solved this issue by adding additional declarations in shim-vue.d.ts file (all my vue files are into spa/page and spa/components directories expect for App.vue):

declare module '*.vue' {
    import Vue from 'vue'
    // noinspection JSDuplicatedDeclaration
    export default Vue
}

declare module '@/spa/pages/*' {
    import Vue from 'vue'
    // noinspection JSDuplicatedDeclaration
    export default Vue
}

declare module '@/spa/components/*' {
    import Vue from 'vue'
    // noinspection JSDuplicatedDeclaration
    export default Vue
}

[sy97]

This is happening when the .vue file extension is emitted from the import statement (i.e. import MyComponent from '@/components/MyComponent' instead of import MyComponent from '@/components/MyComponent.vue'). Haven't figured out how to make it work without the file extension.

life saver

[tinacious]

I was having this issue only in WebStorm and not in VSCode. It was not happening with the build nor serve commands either. I will leave my "solution" here in case anyone is in my boat and finds this thread, but this does not need to be addressed.

• toggle the WebStorm Vue plugin off and then on again
• quit WebStorm and reopen

Note: I did not implement any of the above-mentioned declaration stubs. Doing so actually broke the serve command. With my version of vue-cli, it appears as though similar stubs are already declared in the 2 above-mentioned declaration files.

vue-cli v3.4.1
WebStorm 2019.2.3

[crazyfree]

@a-menshchikov live savior 💯

[Danielg212]

This is because TypeScript does not resolve webpack aliases automatically.

For TS to resolve aliases, they should be added in tsconfig.json under compilerOptions.paths:

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

credit: https://stackoverflow.com/questions/54839057/vscode-showing-cannot-find-module-ts-error-for-vue-import-while-compiling-doe

[yoonasy]

This is because TypeScript does not resolve webpack aliases automatically.

For TS to resolve aliases, they should be added in tsconfig.json under compilerOptions.paths:

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

credit: https://stackoverflow.com/questions/54839057/vscode-showing-cannot-find-module-ts-error-for-vue-import-while-compiling-doe

@Danielg212 thank u. resolve in my webstorm

When I have a shim file and still report an error in my vite project

tsconfig.json

    "paths": {
+    "@/*": ["src/*"],
      "/@/*": ["src/*"],
      "/@/img/*": ["src/assets/img/*"],
...

resolve

[hellothursday]

This is happening when the .vue file extension is emitted from the import statement (i.e. import MyComponent from '@/components/MyComponent' instead of import MyComponent from '@/components/MyComponent.vue'). Haven't figured out how to make it work without the file extension.

It is expected behavior.

See: https://github.com/vuejs/vue-cli/issues/5549#issuecomment-638850440