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

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

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

[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