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