Error: Rule can only have one resource source (provided resource and test + include + exclude)

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: