TS2307: Cannot find module error but the application compiles and runs properly

[wujekbogdan]

I'm trying to set up a TypeScript project with the vue-class-component decorator support.

Everything seems to be fine, the application compiles properly and works fine as well but there's one thing that bothers me.

Code editors (both: WebStorm and Visual Studio Code) complain about the second line of the index.js file. The message is:

TS2307: Cannot find module './components/App.vue'

Here's the code:

index.js

import Vue from 'vue';
import App from './components/App.vue';

new Vue({
  el: '#js--app',
  render (createElement) {
    return createElement(App);
  },
});

App.vue

<template>
  <button @click="onClick">Click!</button>
</template>

<script lang="ts">
  import Vue from 'vue';
  import Component from 'vue-class-component';

  @Component
  export default class App extends Vue {
    message: string = 'Hello!';

    onClick(): void {
      window.alert(this.message)
    }
  }
</script>

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES5",
    "sourceMap": true,
    "inlineSources": true,
    "importHelpers": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}

And here's a screenshot as a confirmation :slight_smile:

---

So why am I having this error and what does it really mean?

...Actually, I know what this error means because I read through the Typescript documentation which says that this error shows up when TypeScript compiler can't resolve a module. But it doesn't seem to make much sense to me. If it couldn't resolve the App.vue module then my application wouldn't compile. Am I right?

I tried to set allowSyntheticDefaultImports to true in tsconfig.json, but it doesn't change anything.

So I'm a bit lost now. My app compiles and runs, but from what I can see it shouldn't 🙃

---

PS
I don't know is Github a proper place for such questions... but on the other hand I'm not sure is it a configuration issue or is it a bug in vue-class-component.
I've already created a topic on the Vue.js forum, but nobody responded to it

[HerringtonDarkholme]

https://github.com/Microsoft/TypeScript-Vue-Starter#single-file-components

https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vue-file-cannot-be-imported-in-ts-file

you can also uses https://github.com/HerringtonDarkholme/vue-ts-plugin

[wujekbogdan]

@HerringtonDarkholme
Thanks a lot!

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

Your vue-ts-plugin plugin solves the issue as well.

BTW, could you explain what's the benefit of using your plugin over a simple module declaration? Is there any reason why I should use it instead of the solution that I've already applied?

I'm trying to develop a vue.js template based on FuseBox that anyone can use, so I prefer to keep the dependencies list as short as possible.

[ktsn]

Closing as this is not an issue of vue-class-component as described by @HerringtonDarkholme .

[vinayvinu500]

TS2307: Cannot find module error but the application compiles and runs properly

I find another solution for this problem in vscode...
I could Give up for this solution after 4 days of working Vue errors with vscode...
Just implement the Vue language in vscode and its optimise the code in Vue framework..
which is implemented default language as Javascript in bottom-right beside of UTF-8 in vscode....
And Thank you for your support and Help, But it could not solved after file is removed in OPEN EDITORS in vscode

[riddvanjs]

This is only for vue 2 wth TypeScript.

I had the same error, what i did was:

1. add this to your main vue file,:
   import VueCompositionAPI from '@vue/composition-api' Vue.use(VueCompositionAPI)
2. Copy this line: declare module '@vue/composition-api' and paste it into shims-vue.d.ts

Then it should work.