Javascript – NPM – unable to resolve dependency tree

I am having an issue that I cannot seem to resolve.

I was trying to update webpack and webpack-cli in a project and I keep getting errors like the following:

npm install webpack@latest  --save-dev  
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack-cli
npm ERR!   dev webpack-cli@"^5.1.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack-cli@"4.x.x" from @webpack-cli/[email protected]
npm ERR! node_modules/@webpack-cli/init
npm ERR!   dev @webpack-cli/init@"^1.1.3" 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!
npm ERR! For a full report see:
npm ERR! C:Usersblah.blahAppDataLocalnpm-cache_logs2023-09-        25T23_54_32_583Z-eresolve-report.txt

I have done the following:

1. rm -rf node_modules package-lock.json
2. npm cache clear --force

I try to install webpack again using the following:
npm install webpack@latest --save-dev

I get the same errors.

I checked the versions of node and npm and saw they were out of date. I updated them so that node is v18.18.0 and npm is 10.1.0

I can get it to work if I add the flag --legacy-peer-deps to every command. However, I shouldn’t have to do this.

Is there something wrong with webpack? Is there something I’m doing wrong or corrupted/misconfigured on my system?