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: vuejs/vue-class-component#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..

[walkhard95]

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
}

[shienyuan]

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: #5549 (comment)

[kfiri]

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').

[57982593]

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

[GeorgioWan]

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 resolved .ts import .vue issue, but it's really wired to touch a declared file in the project 😕

[Zikoat]

I had this issue in the served webpage instead of webstorm. Fixed after stopping and restarting npm run serve

[leaderdsn]

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
}

[vanessabonis]

declare module "*.vue" {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

[Pawel-Dlugosz]

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;
}

[amidnikmal]

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

For me it works too. Thank you!

Could you please explain why this resolves the issue ?

[imrim12]

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

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

[who-Is-Beto]

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";

[rocifier]

May be a stupid answer but it happened to me this week - I was opening the root of our project structure as a workspace in vscode, not the front-end vue.js subfolder. When I opened the correct root folder this error went away.

[vis97c]

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.

[marekv1]

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

[foriLLL]

for me, creating a vue3(3.3.4) project without TypeScript support has the same problem.(ts(2307))

[begueradj]

Same issue when working with Nuxt 3 and Vuetify:

ERROR Failed to resolve import "vue3-datepicker.vue" from "components/TestDate.vue". Does the file exist?

[Josmun55]

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

[emonadeo]

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)

[lordghick]

To complement @Danielg212 answer, that solution fixes the "import" issue, but creates a new error in the script tag. To address both issues, even if I'm not using TS, I created a file at my project's root named "tsconfig.json" with the following:

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

This solved all issues for me

[imnique]

In my case because alongside with typescript the deno language server was detected the hybrid mode was ruled out... So my solution is manually turn on it back.
In settings.json it should be something like:

"vue.server.hybridMode": true

In ui it looks like: