Error running "npm install" after running "npm audit fix --force"

[rmpasswd]

Hello,
First time running npm install gave these warnings:

npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs                                                                                      
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs                                                                                      
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.                                                   
                                                                                                                                                                                  
added 810 packages, and audited 811 packages in 56s

151 packages are looking for funding
  run `npm fund` for details

30 vulnerabilities (21 moderate, 7 high, 2 critical)                                                                                                                              

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Then I ran npm audit fix --force few times, and after that npm install gave following error:

npm ERR! code ERESOLVE                                                                                                                                                            
npm ERR! ERESOLVE could not resolve                                                                                                                                               
npm ERR!                                                                                                                                                                          
npm ERR! While resolving: @pmmmwh/react-refresh-webpack-plugin@0.3.0                                                                                                              
npm ERR! Found: react-refresh@0.14.0                                                                                                                                              
npm ERR! node_modules/react-refresh                                                                                                                                               
npm ERR!   dev react-refresh@"^0.14.0" from the root project                                                                                                                      
npm ERR!   peer react-refresh@"0.10.x || 0.11.x || 0.12.x || 0.13.x || 0.14.x" from react-refresh-typescript@2.0.7                                                                
npm ERR!   node_modules/react-refresh-typescript                                                                                                                                  
npm ERR!     dev react-refresh-typescript@"^2.0.7" from the root project                                                                                                          
npm ERR!                                                                                                                                                                          
npm ERR! Could not resolve dependency:                                                                                                                                            
npm ERR! peer react-refresh@"^0.8.1" from @pmmmwh/react-refresh-webpack-plugin@0.3.0                                                                                              
npm ERR! node_modules/@pmmmwh/react-refresh-webpack-plugin                                                                                                                        
npm ERR!   dev @pmmmwh/react-refresh-webpack-plugin@"^0.3.0" from the root project                                                                                                
npm ERR!                                                                                                                                                                          
npm ERR! Conflicting peer dependency: react-refresh@0.8.3                                                                                                                         
npm ERR! node_modules/react-refresh                                                                                                                                               
npm ERR!   peer react-refresh@"^0.8.1" from @pmmmwh/react-refresh-webpack-plugin@0.3.0                                                                                            
npm ERR!   node_modules/@pmmmwh/react-refresh-webpack-plugin                                                                                                                      
npm ERR!     dev @pmmmwh/react-refresh-webpack-plugin@"^0.3.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!                                                                                                                                                                          
npm ERR! For a full report see file: ...

My question is 1) how do i approach to read this error logs 2) how to approach solving this 'dependency hell?' 3) Why did it throw error after updating some(many) packages?

[Anonymous-Humanoid]

My recommendation: don't use --force if you don't know exactly what you're doing.

• Remove the dependencies by deleting /node_modules
• Remove the resolved dependency tree by deleting package-lock.json, thereby ensuring reinstallation doesn't re-enter dependency hell
• Run npm install to reinstall the dependencies from scratch
• Run npm audit fix to patch the vulnerabilities

The --force flag updates packages to the latest version possible and disables some recommended dependency checks. This results in breaking changes in the code and possible dependency hell. That is, unless you're using specifically future-proofed code, such as long-term support APIs. This project depends on some outdated packages, so it has none of those benefits, and thus, dropping the recommended protections breaks stuff.

Frankly, unless the --force flag has uses beyond my knowledge, it's probably better to specifically upgrade individual packages as needed.

Now, I've never found myself using one of these logs, since they're generally pretty large and complicated, and are the result of an incorrect module resolution, which shouldn't occur if npm has its recommended protections enabled. That being said, the excerpt you've provided is basically saying that there's conflicting versions of react-refresh required, and unlike tools and languages like Go, npm refuses to install different versions of the same package.

• react-refresh-typescript version 2.0.7 (react-refresh-typescript@2.0.7) depends on react-refresh versions 0.10-0.14 (react-refresh@"0.10.x || 0.11.x || 0.12.x || 0.13.x || 0.14.x")
• @pmmmwh/react-refresh-webpack-plugin version 0.3.0 depends on react-refresh version 0.8, starting specifically with 0.8.1 (react-refresh@^0.8.1).

Two incompatible versions of react-refresh. But again, there's no need to downgrade, as the project's default configuration works without fail.

I hope this is sufficiently explanatory, but feel free to reply if you have any further questions or concerns.