npm run dev not working with webpack/babel 冲突

Question

I am trying to run npm run dev for a Vue project but I keep getting the following output:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: babel-loader@7.1.5
npm ERR! Found: webpack@5.75.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.0.0" from css-loader@6.7.2
npm ERR!   node_modules/css-loader
npm ERR!     dev css-loader@"^6.7.2" from the root project
npm ERR!   peer webpack@"^5.20.0" from html-webpack-plugin@5.5.0
npm ERR!   node_modules/html-webpack-plugin
npm ERR!     dev html-webpack-plugin@"^5.5.0" from the root project
npm ERR!   8 more (postcss-loader, terser-webpack-plugin, url-loader, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR! node_modules/babel-loader
npm ERR!   dev babel-loader@"^7.1.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^7.1.1" 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.

I have no idea what to do, I have tried uninstalling vue-cli and tried re-installing it (I'm not sure if this messed up my packages). Is there a way to cleanly delete everything and start fresh? If anyone can help that would be much appreciated!

Update: I tried starting a new project with vue init webpack frontend in a new folder and tried installing axios and am getting the following error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: vuex@4.1.0
npm ERR! Found: vue@2.7.14
npm ERR! node_modules/vue
npm ERR!   vue@"^2.5.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.2.0" from vuex@4.1.0
npm ERR! node_modules/vuex
npm ERR!   vuex@"^4.1.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vue@3.2.45
npm ERR! node_modules/vue
npm ERR!   peer vue@"^3.2.0" from vuex@4.1.0
npm ERR!   node_modules/vuex
npm ERR!     vuex@"^4.1.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.

I recently updated my version of node (v19.1.0) and npm (v8.19.3), could that be an issue? It generally seems like I am getting a bunch of conflicts every time I try to install new packages. Is there a way to just start clean?

Answer 1

Probably one of your packages is outdated, according to the error. I guess it's the babel loader.

• Method 1 Upgrading or Updating your packages might solve the dependency error.
• Method 2 Try running npm install --force or npm install --legacy-peer-deps . It should work.