Encountered an error message
Module not found: Error: Can't resolve './decorators/Emit'https://i.stack.imgur.com/6v1Ux.png
Interestingly, IntelliJ IDEA does not display the files in the tree view, yet I can access them through the 'go to source' feature and by checking the native file system.
https://i.stack.imgur.com/HQu2X.png
The specific errors encountered include:
ERROR in ../node_modules/vue-property-decorator/lib/index.js 3:0-41
Module not found: Error: Can't resolve './decorators/Emit' in 'C:\Users\XXXX\Package\node_modules\vue-property-decorator\lib'
@ ./index.ts 1:0-49 2:12-19
ERROR in ../node_modules/vue-property-decorator/lib/index.js 4:0-45
Module not found: Error: Can't resolve './decorators/Inject' in 'C:\Users\XXXX\Package\node_modules\vue-property-decorator\lib'
@ ./index.ts 1:0-49 2:12-19
ERROR in ../node_modules/vue-property-decorator/lib/index.js 5:0-43
Module not found: Error: Can't resolve './decorators/Model' in 'C:\Users\XXXX\Package\node_modules\vue-property-decorator\lib'
@ ./index.ts 1:0-49 2:12-19\
Typically, such errors point to TypeScript compiler settings like allowSyntheticDefaultImports or esModuleInterop, but in this case, they are Webpack-related. For reference, here is my TypeScript configuration:
{
"compilerOptions": {
"target": "ES2020",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"experimentalDecorators": true,
"baseUrl": "./",
"paths": {}
}
}
My Webpack configuration looks like this:
import Webpack from "webpack";
import Path from "path";
import { VueLoaderPlugin } from "vue-loader";
const webpackConfig: Webpack.Configuration = {
context: Path.resolve(process.cwd(), "Source"),
entry: "./index.ts",
output: {
filename: "index.js",
path: Path.resolve(process.cwd(), "Distributable")
},
mode: "development",
watch: true,
module: {
rules: [
{
test: /\.ts$/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [ /\.vue$/ ]
}
},
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.pug$/u,
oneOf: [
{
resourceQuery: /^\?vue/u,
use: [ "pug-plain-loader" ]
},
{
use: [
{
loader: "html-loader",
options: {
minimize: { caseSensitive: true }
}
},
"pug-html-loader"
]
}
]
}
]
},
resolve: {
extensions: [ ".ts" ]
},
plugins: [
new VueLoaderPlugin()
]
};
export default webpackConfig;
No issues were faced with vue-property-decorator for Vue 2.x, but adjustments are needed for version 10.x supporting Vue 3.x. Open to suggestions except using boilerplate setups via Vue-cli or Vite - focusing on manual setup with Webpack.