问题
Laravel 引入 Vue 启动项目时报错了 Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
,更多错误信息如下
[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
Require stack:
- C:\Users\Kelen\Desktop\hello\app\node_modules\vue-loader\lib\plugin-webpack5.js
- C:\Users\Kelen\Desktop\hello\app\node_modules\vue-loader\lib\plugin.js
- C:\Users\Kelen\Desktop\hello\app\node_modules\vue-loader\lib\index.js
- C:\Users\Kelen\Desktop\hello\app\node_modules\laravel-mix\src\components\Vue.js
- C:\Users\Kelen\Desktop\hello\app\node_modules\laravel-mix\src\components\ComponentRegistrar.js
- C:\Users\Kelen\Desktop\hello\app\node_modules\laravel-mix\src\Mix.js
- C:\Users\Kelen\Desktop\hello\app\node_modules\laravel-mix\setup\webpack.config.js
- C:\Users\Kelen\Desktop\hello\app\node_modules\webpack-cli\lib\webpack-cli.js
- C:\Users\Kelen\Desktop\hello\app\node_modules\webpack-cli\lib\bootstrap.js
- C:\Users\Kelen\Desktop\hello\app\node_modules\webpack-cli\bin\cli.js
- C:\Users\Kelen\Desktop\hello\app\node_modules\webpack\bin\webpack.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:93:18)
at Object.<anonymous> (C:\Users\Kelen\Desktop\hello\app\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\Kelen\\Desktop\\hello\\app\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
'C:\\Users\\Kelen\\Desktop\\hello\\app\\node_modules\\vue-loader\\lib\\plugin.js',
'C:\\Users\\Kelen\\Desktop\\hello\\app\\node_modules\\vue-loader\\lib\\index.js',
'C:\\Users\\Kelen\\Desktop\\hello\\app\\node_modules\\laravel-mix\\src\\components\\Vue.js',
'C:\\Users\\Kelen\\Desktop\\hello\\app\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
'C:\\Users\\Kelen\\Desktop\\hello\\app\\node_modules\\laravel-mix\\src\\Mix.js',
'C:\\Users\\Kelen\\Desktop\\hello\\app\\node_modules\\laravel-mix\\setup\\webpack.config.js',
'C:\\Users\\Kelen\\Desktop\\hello\\app\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
'C:\\Users\\Kelen\\Desktop\\hello\\app\\node_modules\\webpack-cli\\lib\\bootstrap.js',
'C:\\Users\\Kelen\\Desktop\\hello\\app\\node_modules\\webpack-cli\\bin\\cli.js',
'C:\\Users\\Kelen\\Desktop\\hello\\app\\node_modules\\webpack\\bin\\webpack.js'
]
}
分析
通过分析,我发现 vue 和 vue-loader 都正确安装,而且在 node-modules
里面也可以找到对应的包。
解决
可以尝试手动更新 vue-loader 包。
npm update vue-loader
或者直接安装
npm i vue-loader@15.9.8 --save-dev
如果还是不行的话,删除 node_modules
和 package-lock.json
文件,然后修改 vue-loader
版本为 15.9.8
, 再执行 npm install
命令。