React 18.3.1环境下npm安装Bootstrap多次触发ERESOLVE依赖冲突错误

问题 #

在React 18.3.1项目中，执行以下三条npm命令安装Bootstrap均失败：

• npm install bootstrap@v5.3.3
• npm install bootstrap
• npm install jquery@1.9.1 popper.js@^1.12.9 bootstrap

每次触发ERESOLVE依赖冲突错误，原因是项目中已安装的@material-ui/core@4.12.4仅支持React ^16.8.0 || ^17.0.0版本，与当前使用的React 18.3.1不兼容，导致依赖解析失败。目标是在React 18.3.1环境下成功安装Bootstrap。

错误日志详情 #

(base) ritwikbiswas@Ritwiks-MacBook-Air awesomeapp % npm install jquery@1.9.1 popper.js@^1.12.9 bootstrap
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.3.1
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.11.4
npm ERR!   node_modules/@emotion/react
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.11.5
npm ERR!     node_modules/@emotion/styled
npm ERR!       peerOptional @emotion/styled@"^11.3.0" from @mui/material@5.15.17
npm ERR!       node_modules/@mui/material
npm ERR!         peer @mui/material@"^5.0.0" from @mui/icons-material@5.15.17
npm ERR!         node_modules/@mui/icons-material
npm ERR!         1 more (the root project)
npm ERR!       3 more (@mui/styled-engine, @mui/system, the root project)
npm ERR!     peerOptional @emotion/react@"^11.5.0" from @mui/material@5.15.17
npm ERR!     node_modules/@mui/material
npm ERR!       peer @mui/material@"^5.0.0" from @mui/icons-material@5.15.17
npm ERR!       node_modules/@mui/icons-material
npm ERR!         @mui/icons-material@"^5.15.17" from the root project
npm ERR!       1 more (the root project)
npm ERR!     3 more (@mui/styled-engine, @mui/system, the root project)
npm ERR!   peer react@">=16.8.0" from @emotion/styled@11.11.5
npm ERR!   node_modules/@emotion/styled
npm ERR!     peerOptional @emotion/styled@"^11.3.0" from @mui/material@5.15.17
npm ERR!     node_modules/@mui/material
npm ERR!       peer @mui/material@"^5.0.0" from @mui/icons-material@5.15.17
npm ERR!       node_modules/@mui/icons-material
npm ERR!         @mui/icons-material@"^5.15.17" from the root project
npm ERR!       1 more (the root project)
npm ERR!     peerOptional @emotion/styled@"^11.3.0" from @mui/styled-engine@5.15.14
npm ERR!     node_modules/@mui/styled-engine
npm ERR!       @mui/styled-engine@"^5.15.14" from @mui/system@5.15.15
npm ERR!       node_modules/@mui/system
npm ERR!         @mui/system@"^5.15.15" from @mui/material@5.15.17
npm ERR!         node_modules/@mui/material
npm ERR!     2 more (@mui/system, the root project)
npm ERR!   14 more (@emotion/use-insertion-effect-with-fallbacks, ...)
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!   @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!     @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! 
npm ERR! For a full report see:
npm ERR! /Users/ritwikbiswas/.npm/_logs/2024-05-12T06_15_53_877Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ritwikbiswas/.npm/_logs/2024-05-12T06_15_53_877Z-debug-0.log
(base) ritwikbiswas@Ritwiks-MacBook-Air awesomeapp % 

当前项目React版本信息 #

"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",

解决方案 #

方法1：跳过peer依赖检查快速安装 #

直接用--legacy-peer-deps参数忽略旧版库的peer依赖限制，快速安装Bootstrap：

# 仅安装Bootstrap 5.3.3
npm install bootstrap@v5.3.3 --legacy-peer-deps

# 或安装带jquery和popper的版本
npm install jquery@1.9.1 popper.js@^1.12.9 bootstrap --legacy-peer-deps

注意：此方法可能隐藏潜在兼容性问题，但Bootstrap 5本身不强制依赖jquery（仅部分组件需要），若项目不使用这些组件，基本无影响。

方法2：升级Material-UI到兼容React 18的版本 #

@material-ui/core v4不支持React 18，官方已迁移到@mui/material（v5及以上），完全兼容React 18，从根源解决冲突：

1. 卸载旧版依赖：

npm uninstall @material-ui/core

2. 安装新版MUI组件库：

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material # 可选，按需安装图标库

3. 正常安装Bootstrap：

npm install bootstrap@v5.3.3

方法3：仅使用Bootstrap纯CSS版本 #

若只需要Bootstrap样式，无需其JavaScript组件，可直接引入CDN或安装包：

• 在public/index.html中引入CDN：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

• 或安装后在项目中引入CSS：

npm install bootstrap@v5.3.3 --legacy-peer-deps

在src/index.js中添加：

import 'bootstrap/dist/css/bootstrap.min.css';

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