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

Creating file vue-shim.d.ts in src solved the problem in my case

declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

Sorry to resurrect, but this still pops up.

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

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.

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.

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

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
}

I also have this issue. Using Vue 2.6.10.

Bonus: Make sure you include the *.d.ts files in your tsconfig.json

{
   ...
  "include": ["src/**/*", "src/**/*.vue", "**/*.d.ts"],
   ...
}

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
}

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

I restarted webstorem and this problem was solved. But I don’t know why

declare module “*.vue” { import type { DefineComponent } from ‘vue’ const component: DefineComponent<{}, {}, any> export default component }

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

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

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

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?

In webstorm,the following worked for me. Uncheck the vuejs and vite plugins temporarily and then re-enable them. Restart the IDE afterwards.

It helped me that I created another additional file with a different name: 'vue-shims.d.ts ’ and also wrote in it:

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

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
}

Is there a reason not to use this in the index.d.ts instead?

declare module '*.vue' {
  const SFC: Vue.Component;
  export default SFC;
}

IIRC, Vue Single-File-Components export Vue.Component objects, not specifically VueConstructor (the type of Vue from import Vue from 'vue').

Creating file vue-shim.d.ts in src solved the problem in my case

declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

ReturnType<typeof defineComponent> resolves to any.

(see https://github.com/vuejs/core/blob/v3.3.9/packages/runtime-core/src/apiDefineComponent.ts)

For me installing TypeScript Vue Plugin (Volar) for vscode fixed to resolve .vue files for ts.

Bonus: Make sure you include the *.d.ts files in your tsconfig.json

{
   ...
  "include": ["src/**/*", "src/**/*.vue", "**/*.d.ts"],
   ...
}

For me this was the real issue.

Every time I create a Vue-ts project I use this types helper. I hope this type config helps c:

//src/shims-vue.d.ts
declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

//if you use env variables c:
declare module "*/envs.ts";

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