Description
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