The Vue project reports an error after running NPM run dev/NPM run serve:
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"type": "javascript/auto",
"include": [
{}
],
"use": []
}
at checkResourceSource (D:\Program Files\vue_shop\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
at Function.normalizeRule (D:\Program Files\vue_shop\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:198:4)
at D:\Program Files\vue_shop\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:110:20
at Array.map (<anonymous>)
at Function.normalizeRules (D:\Program Files\vue_shop\node_modules\@vue\cli-
```
Process finished with exit code 1
Cause of problem:
Webpack version conflict.
Webpack version conflict issue.
Some new versions of libraries require [email protected], and when updating dependencies, [email protected] is installed as the primary dependency based on the rules of dependency selection. However, @vue/cli relies on [email protected], and its own webpack configuration is not compatible with [email protected], so it reports an error and cannot continue to compile. If you’re also using @vue/cli, then don’t upgrade [email protected] rashly.
Following its solution, I found a conflict between webpack and the previously installed version of less,less-loader
The overall solution is as follows:
//uninstall webpack
npm uninstall webpack
//Install the specified version of webpack
npm install [email protected] --save-dev
npm uninstall less-loader
npm uninstall less
//Install compliant versions of less and less-loader
npm install [email protected] [email protected] --save-dev
Read More:
- [Solved] Vue Project Error: Error: Cannot find module ‘webpack‘ Require stack以及Error: Rule can only have one resource so
- [Solved] Syntax Error: TypeError: this.getOptions is not a function
- Vue Install less Error: While resolving: [email protected]
- [Solved] Error Rule can only have one resource source (provided resource and test + include + exclude)
- [Solved] Error Rule can only have one resource source (provided resource and test + include + exclude)
- [Solved] Vue Error: Error: Rule can only have one resource source (provided resource and test + include + ex
- Vue Package Image Error: Syntax Error: Error: ‘**\node_modules\pngquant-bin\vendor\pngquant.exe‘
- [Solved] npm Error: Class extends value undefined is not a constructor or null
- [Solved] Error: ENOENT: no such file or directory, scandir ‘..\node_modules\node-sass\vendor‘
- [Solved] Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module ‘autoprefixer‘
- Vue Use scss Error: this.getOptions is not a function [How to Solve]
- [Solved] Syntax Error: Error: Node Sass does not yet support your current environment:
- When starting Vue project: cannot find module ‘webpack cli/bin/config yargs’ error resolution
- [Solved] Vue Error: Module build failed Error Node Sass version 6.0.1 is incompatible with ^4.0.0.
- [Solved] Node.js v17 npm run dev Error: opensslErrorStack
- How to Solve @Vue/cli3.X Using less Error
- Node.js Error: Error: Cannot find module ‘express‘ [How to Solve]
- [Solved] Syntax Error: TypeError: this.getOptions is not a function
- [Solved] Vue Project Error: Syntax Error: TypeError: this.getOptions is not a function
- [Solved] ERROR Error: Cannot find module ‘vue-loader-v16/package.json‘