React项目安装react-router-dom遇ERESOLVE依赖冲突求助

问题背景 #

执行npm install react-router-dom时触发ERESOLVE错误，核心原因是：当前项目使用react@18.2.0，但已安装的@material-ui/core@4.12.4仅支持React ^16.8.0 || ^17.0.0，导致npm无法自动解析依赖版本冲突。完整错误日志如下：

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR!
npm ERR! While resolving: @material-ui/core@4.12.4 npm ERR! Found:
react@18.2.0 npm ERR! node_modules/react npm ERR! peer
react@"^18.0.0" from @testing-library/react@13.4.0 npm ERR!

node_modules/@testing-library/react npm ERR!

@testing-library/react@"^13.4.0" from the root project npm ERR! peer
react@"^18.2.0" from react-dom@18.2.0 npm ERR!

node_modules/react-dom npm ERR! peer react-dom@"^18.0.0" from
@testing-library/react@13.4.0 npm ERR!

node_modules/@testing-library/react npm ERR!

@testing-library/react@"^13.4.0" from the root project npm ERR!
peer react-dom@">=16.6.0" from react-transition-group@4.4.5 npm
ERR! node_modules/react-transition-group npm ERR!

react-transition-group@"^4.4.0" from @material-ui/core@4.12.4 npm ERR!
node_modules/@material-ui/core npm ERR! peer
@material-ui/core@"^4.0.0" from @material-ui/icons@4.11.3 npm ERR!

node_modules/@material-ui/icons npm ERR! 1 more (the root
project) npm ERR! 2 more (the root project, react-router-dom) npm
ERR! 5 more (react-router, react-scripts, react-transition-group,
...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer
react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4 npm ERR!
node_modules/@material-ui/core npm ERR! peer
@material-ui/core@"^4.0.0" from @material-ui/icons@4.11.3 npm ERR!

node_modules/@material-ui/icons npm ERR!

@material-ui/icons@"^4.11.3" from the root project npm ERR!

@material-ui/core@"^4.12.4" from the root project npm ERR! npm ERR!
Conflicting peer dependency: react@17.0.2 npm ERR! node_modules/react
npm ERR! peer react@"^16.8.0 || ^17.0.0" from
@material-ui/core@4.12.4 npm ERR! node_modules/@material-ui/core
npm ERR! peer @material-ui/core@"^4.0.0" from
@material-ui/icons@4.11.3npm ERR! node_modules/@material-ui/icons
npm ERR! @material-ui/icons@"^4.11.3" from the root project npm
ERR! @material-ui/core@"^4.12.4" 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 C:\Users\NKEM AWA\AppData\Local\npm-cache\eresolve-report.txt
for a full report.

npm ERR! A complete log of this run can be found in: npm ERR!

C:\Users\User
Name\AppData\Local\npm-cache_logs\2022-10-31T18_23_30_712Z-debug-0.log

解决方案 #

方案1：临时绕过依赖检查（快速生效） #

安装react-router-dom时添加--legacy-peer-deps参数，让npm采用v6版本的依赖解析逻辑，忽略peer版本冲突：

npm install react-router-dom --legacy-peer-deps

若上述命令无效，可尝试强制安装（注意：可能引发未知兼容性问题，谨慎使用）：

npm install react-router-dom --force

方案2：升级Material UI到兼容React 18的版本（长期稳定） #

Material UI v4不支持React 18，建议升级到官方更名后的MUI v5：

1. 卸载旧版Material UI依赖：

npm uninstall @material-ui/core @material-ui/icons

2. 安装MUI v5及必要依赖：

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

3. 调整项目中组件的导入路径，例如：
   • 旧路径：import Button from '@material-ui/core/Button'
   • 新路径：import Button from '@mui/material/Button'

方案3：降级React到17.x版本（仅适合必须保留MUI v4的场景） #

若无法升级MUI，可将React降级到17.x版本：

1. 卸载当前React和ReactDOM：

npm uninstall react react-dom

2. 安装React 17.0.2及对应ReactDOM：

npm install react@^17.0.2 react-dom@^17.0.2

3. 同步降级测试库到兼容版本：

npm install @testing-library/react@^12.1.5

内容的提问来源于stack exchange，提问作者Derickoh