Vue加载器17.0.0 + Webpack 5.74.0 - 模块构建失败。

Question

我正在尝试将vue-loader与我的SPA VUE应用程序一起使用，但是我遇到了以下错误。

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

为了消除应用程序代码噪声，我创建了一个非常简单的组件 app2.vue： 并尝试将其连接到我的main.js 入口点文件。

<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": []
}

你知道我为什么一直收到这个错误吗？

- daniel

---

Narretz的回答解决了你的问题吗？如果是的话，将其标记为答案会有所帮助。 - bilogic

Answer 1

vue-loader 16+不兼容vue 2.x

在vue 2.7（和2.6）中，vue-template-compiler / @vue/sfc-compiler具有以下API：

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

对于vue 3，api发生了更改，因此vue-loader也相应地在16+中进行了更改：https://github.com/vuejs/vue-loader/blob/1b1a195612f885a8dec3f371edf1cb8b35d341e4/src/index.ts#L92

因此，您需要使用vue-loader 15.x

- Narretz

---

体验相同的内容。我将vue-loader版本更改为15.10.1后，它现在可以工作了。 - Cruze

你是一个英雄！ - Vörös Imi

问题的确切修复！ - Isabelle May

Answer 2

我曾经遇到过类似的问题。尝试重新安装webpack npm install webpack@5.74.0 --save。这应该可以解决问题。如果还是不行，尝试降低版本。

另外，也可以尝试：

1. 删除node_modules文件夹和package-lock.json
2. 再次运行npm install

- Mohammad Ghali