React Bootstrap ^2.0.2 组件导入失败相关报错问题求解

React Bootstrap 2.x 版本基于 Bootstrap 5 开发，和 1.x 版本存在较多不兼容差异，你遇到的三个报错对应解决方案如下：

• 针对第一个报错：
  报错原因有两个：一是你导入时拼写错误，把react-bootstrap写成了react-bootstrapt；二是 React Bootstrap 2.x 没有提供默认导出，所有组件均为命名导出，禁止使用默认导入写法。
• 针对第二个报错：
  React Bootstrap 2.x 已经移除了单组件路径导入的支持，不再支持import 组件名 from 'react-bootstrap/组件名'的写法，所有组件必须从根包统一命名导入。
• 针对第三个报错：
  Bootstrap 5 官方已经移除了 Jumbotron 组件，因此 React Bootstrap 2.x 也没有导出该组件，你导入的其余组件Container、Button、Alert都是 2.x 版本中存在的合法组件，去掉Jumbotron即可正常导入。

额外优化建议 #

1. 移除 Jumbotron 的替代实现：你可以自定义样式实现原 Jumbotron 的效果，示例代码如下：

<div className="p-5 mb-4 bg-light rounded-3">
  <Container fluid>
    <h1 className="display-5 fw-bold">自定义Jumbotron效果</h1>
    <p className="col-md-8 fs-4">这里是内容区域</p>
    <Button variant="primary">示例按钮</Button>
  </Container>
</div>

2. 你的项目package.json中配置了"type": "module"，而你使用的react-scripts@4.0.3对 ESM 规范支持不完善，建议要么升级react-scripts到 5.x 版本，要么删除"type": "module"配置，避免出现其他编译异常。
3. 导入组件仅保留现有合法组件即可，示例写法：

import { Container, Button, Alert } from 'react-bootstrap';

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