Vue loader 17.0.0 + Webpack 5.74.0 - Module build failed

Question

I am trying to use vue-loader with my SPA VUE APP, And I'm getting the following error.

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 ms

For eliminating app code noise, I created very simple component app2.vue: And tried to connect it to my main.js entry point 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": []
}

Do you have any idea why I keep getting this error?

Leoraleos

Did Narretz's answer solve your issue? It helps to mark his as answer if it did – Exclave

Answer 1

vue-loader 16+ isn't compatible with vue 2.x

The vue-template-compiler / @vue/sfc-compiler has the following API in vue 2.7 (and 2.6):

https://github.com/vuejs/vue/blob/ca11dc6a86f26accc893c1ce5b611dc84a2e7c2d/packages/compiler-sfc/src/parse.ts#L33

for vue 3, the api changes, and the vue-loader also changes accordingly in 16+: https://github.com/vuejs/vue-loader/blob/1b1a195612f885a8dec3f371edf1cb8b35d341e4/src/index.ts#L92

So you need to use vue-loader 15.x

Spear

experience the same stuff. it's working now when I change the vue-loader version to 15.10.1 – Etheline

Exact fix of the problem! – Influential

Answer 2

I encountered a similar issue once.Try reinstalling webpack npm install [email protected] --save . It should work. If however it didn't, try lowering the version a bit.

Also try to:

1. delete node_modules folder and package-lock.json
2. run npm install again

Editheditha