Hey there, I'm currently stuck on this error and unable to figure out how to solve it. Both files are located in the same directory: ...assets\article-area\
[tsl] ERROR in C:\www\office\assets\article-area\index.ts(2,18)
TS2307: Cannot find module './Test.vue' or its corresponding type declarations.
ts-loader-default_e3b0c44298fc1c14
@ ./assets/index.ts 12:14-45
This is my index.ts
import {createApp} from "vue";
import Test from "./Test.vue";
export default () => {
document.querySelectorAll(".article-edit-area-select").forEach((root: HTMLElement) => {
let app= createApp(Test);
app.mount(root);
});
}
And here's my Test.vue
<template>
Test
</template>
<script lang="ts">
export default {
name: "Test",
}
</script>
I have a feeling that this error might be due to incorrect settings in my tsconfig.json. Could it be possible?
Here's my tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"lib": [
"dom",
"es5",
"es2015.promise",
"es2015.collection"
]
},
"exclude": [
"node_modules"
],
"include": [
"assets/**/*.ts"
]
}
As for my Webpack.config...
...
module: {
rules: [
{
test: /\.ts$/,
loader: "ts-loader",
exclude: /node_modules/,
options: { appendTsSuffixTo: [/\.vue$/] },
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(styl|stylus)$/,
use: [
MiniCssExtractPlugin.loader,
// 'style-loader',
'css-loader',
'postcss-loader',
'stylus-loader'
]
},
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader,
// 'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test: /\.(png|jpg|gif|svg|ttf|woff|woff2)$/,
type: "asset/resource"
}
]
},
...
The interesting thing is, despite the error output during 'npm run watch', the code still compiles and works fine in the browser. Quite perplexing, isn't it? :/