I am encountering an issue while trying to integrate vue-loader into my SPA VUE APP. The error message I'm receiving is as follows:
ERROR in ./app2.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
at Object.loader (/Users/daniel.bachnov/docker/qhs3-admin/frontend/node_modules/vue-loader/dist/index.js:70:34)
@ ./main.js 1:0-29 14:8-11
webpack 5.74.0 compiled with 1 error and 3 warnings in 3312 msTo simplify the troubleshooting process, I created a basic component named app2.vue: I attempted to link this component to my main.js entry file.
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">You clicked me {{ count }} times.</button>
</template>main.js
import App from './app2.vue';
import Router from './router/router.js';
import Store from './store/index.js';
Vue.use(Vuetify)
Vue.use(VueRouter);
const app = new Vue({
router: Router.router,
store: Store,
el: '#app',
vuetify: new Vuetify(),
components: {
App,
}
});webpack.config.js:
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'production',
entry: './main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, './../src/public/dist/'),
publicPath: "/dist/"
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin()
]
};package.json
{
"name": "app",
"version": "1.0.0",
"description": "app",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack"
},
"author": "daniel bach",
"license": "ISC",
"dependencies": {
"@mdi/js": "^5.9.55",
"@vue/composition-api": "1.0.4",
"@vuetify/cli-plugin-utils": "^0.0.9",
"apexcharts": "^3.27.3",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-apexcharts": "^1.6.2",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0",
"vuex": "^3.4.0",
"vue-loader": "^17.0.0"
},
"devDependencies": {
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.7.13",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"keywords": []
}Could anyone provide insights on why this error persists?