Module build failed (from ./node_modules/vue-loader/dist/index.js)

[csteri]

I get this error after running npm run dev and I get this error in the terminal:

ERROR in ./resources/js/erp/components_VueJs/example.vue Module build **failed** (from ./node_modules/vue-loader/dist/index.js): TypeError: Cannot read properties of undefined (reading 'styles') at Object.loader (C:\laragon\www\erp\node_modules\vue-loader\dist\index.js:70:34)

My package.json is:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },

    "devDependencies": {
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.53.0",
        "sass-loader": "^13.0.2",
        "vue-loader": "^17.0.0",
        "vue-template-compiler": "^2.7.2",
        "webpack": "^5.73.0"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^6.1.1",
        "@popperjs/core": "^2.11.5",
        "bootstrap": "^5.1.3",
        "bootstrap-icons": "^1.8.3",
        "vue": "^2.7.2"
    }
}

and webpack.mix.js is:

mix.js('resources/js/erp/app.js', 'public/js/erp')
      .js('resources/js/site/app.js', 'public/js/site')
      .js('resources/js/erp/vueApp.js', 'public/js/erp').vue()
    .postCss('resources/css/erp/app.css', 'public/css/erp', [])
    .postCss('resources/css/site/app.css', 'public/css/site', [])
    .sass("resources/scss/erp/app.scss", "public/css/erp")
    .sass("resources/scss/site/app.scss", "public/css/site")
    .webpackConfig({
        plugins: [
        ],
        resolve: {
        },
        stats: {
            children: true
        }
    });

and app.js

import Vue from 'vue';
window.Vue = require('vue');

Vue.component('example-comp', require('./components_VueJs/example.vue').default);

For installation I used the following commands:
npm install [email protected]
npm install -D vue-loader vue-template-compiler
npm run dev (and here the error appears)

[vue-bot]

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!

[itrack]

I have the same problem, possible a bug?

[nouce]

Same issue here!

[batFormat]

Same issue!

[itrack]

@yyx990803 @sodatea Hi guys, seems to be a problem, could you investigate? Thank you!

[haoqunjiang]

Please open a new issue with the issue-helper, and provide the necessary information for us to reproduce the error.
A minimal reproduction is required.

[csteri]

Please open a new issue with the issue-helper, and provide the necessary information for us to reproduce the error. A minimal reproduction is required.

It is a compatibility issue between VueJs2 and vue-loader = 17.0.0

[dima-ivanov-pdffiler]

Same issue!

[he-yang]

Same issue, how to solve?

[haoqunjiang]

It is a compatibility issue between VueJs2 and vue-loader = 17.0.0

Use vue-loader@15 for Vue.js 2. 16 & 17 are only compatible with Vue 3.

[Humni]

Version 15 works a treat, thanks @sodatea

[shiliangL]

Same issue here!

[TuKun33]

Same issue!

I am using Vue3.x ,
vue-loader ：
17.0.0
16.8.3
16.8.2

[xiaolu-lujunji]

This is a viable solution

vue 2.7.10
vue-router 3.6.5
vuex 3.6.2

vue-loader 15.10.0
vue-style-loader 4.1.3

Webpack configuration

module: {
  rules: [
    {
      test: /\.vue$/,
      use: {
        loader: 'vue-loader',
        options: {
          sourceMap: true,
        },
      },
    },
    {
      test: /\.js$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
          },
        },
      ],
      exclude: /node_modules/,
    },
    {
      test: /\.ts$/,
      loader: 'ts-loader',
      options: { transpileOnly: true, appendTsSuffixTo: [/\.vue$/] },
    },
    // ...
  ],
},
plugins: [
  new VueLoaderPlugin(),
  // ...
]