Could not resolve dependency peer Webpack5 for css-loader-CodePudding

Actually, I am very new with javascript, I want to install vue-audio-visual to my project. But I got weird error in my node console which I don't know what's the relation. The npm error shown like below:

code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0 || ^5.0.0" from @soda/[email protected]
npm ERR!   node_modules/@soda/friendly-errors-webpack-plugin
npm ERR!     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/[email protected]
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!       3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project)
npm ERR!   webpack@"^4.0.0" from @vue/[email protected]
npm ERR!   node_modules/@vue/cli-plugin-babel
npm ERR!     dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!   19 more (cache-loader, thread-loader, @vue/cli-service, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.0.0" from [email protected]
npm ERR! node_modules/css-loader
npm ERR!   peer css-loader@"*" from [email protected]
npm ERR!   node_modules/vue-loader
npm ERR!     vue-loader@"^15.9.2" from @vue/[email protected]
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!       3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project)
npm ERR!   css-loader@"^6.6.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.0.0" from [email protected]
npm ERR!   node_modules/css-loader
npm ERR!     peer css-loader@"*" from [email protected]
npm ERR!     node_modules/vue-loader
npm ERR!       vue-loader@"^15.9.2" from @vue/[email protected]
npm ERR!       node_modules/@vue/cli-service
npm ERR!         peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR!         node_modules/@vue/cli-plugin-babel
npm ERR!         3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project)
npm ERR!     css-loader@"^6.6.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/julapps/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/julapps/.npm/_logs/2022-10-23T12_42_49_511Z-debug-0.log

However, in my package.json file i use these dependencies css-loader": "^6.6.0"

and vue dep:

"devDependencies": {
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-plugin-router": "^4.5.15",
  "@vue/cli-service": "~4.5.0",
  "@vue/compiler-sfc": "^3.0.0",
  "webpack": "^4.46.0"
}

Can somebody explain to me what should I do?

CodePudding user response：

You're using Vue3 with Webpack rather than Vite?
Not sure if it's a known choice but I rather recommend Vite.

As of why this issue, the error explains it well. Let me translate:

To install css-loader (or anything depending on it), I need at least Webpack 5

If you go check the changelog of the given package, you can see that Webpack 5 is indeed a mandatory upgrade

minimum supported webpack version is 5, we recommend to update to the latest version for better performance

Feel free to:

use Vite rather
install Webpack 5 with npm
work with yarn/pnpm, to get better errors