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 webpack@5, and when updating dependencies, webpack@5 is installed as the primary dependency based on the rules of dependency selection. However, @vue/cli relies on webpack@4, and its own webpack configuration is not compatible with webpack@5, so it reports an error and cannot continue to compile. If you’re also using @vue/cli, then don’t upgrade webpack@5 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] 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
• [Solved] Vue Use gzip Package Error: Rule can only have one resource source
• [Solved] Vue Project Error: Error: Cannot find module ‘webpack‘ Require stack以及Error: Rule can only have one resource so
• “Failed to load resource: net::ERR_FILE_NOT_FOUND” error. The project created by vue-cli 3.0 can run under dev, and an error is reported after packaging, and the page is blank.
• [Solved] Error: EBUSY: resource busy or locked, lstat ‘D:\DumpStack.log.
• Node.js Error: “Error: EBUSY: resource busy or locked, stat“
• [Solved] Failed to load resource: net::ERR_FILE_NOT_FOUND
• After Vue is packaged to the server, the static resource path reports an error
• [Solved] Vue item packaging error: Failed to load resource: the server responded with a status of 404 (Not Found)
• [Solved] Error: Can‘t find Python executable “python“, you can set the PYTHON env variable.
• Yarn vue3 modify the name of the source file Error [Solved]
• [Solved] Vue unit test syntax error: unexpected token ‘export‘
• [Solved] error ‘test‘ is assigned a value but never used no-unused-vars
• Module not found: Error: Can‘t resolve ‘core-js/modules/es.promise.js‘ in
• [Solved] Vue project configurate test environment and package error
• [vue/no-multiple-template-root] The template root requires exactly one element.
• [Solved] To install it, you can run: npm install –save core-js/modules/es.error.cause.js
• [vite] Failed to parse source for import analysis because the content contains invalid JS syntax.