CRA项目安装react-bootstrap后导入组件提示编译失败如何解决

• react-scripts版本过低：你当前使用的react-scripts@1.1.5为早期旧版本，内置的webpack和babel配置不支持解析react-bootstrap 2.x版本使用的ES6+新语法，因此无法编译node_modules目录下的react-bootstrap代码。
• 导入语法错误：你的导入语句import Form from "react-bootstrap"为默认导入全量包，正确的单组件导入应使用解构写法。

方案1（推荐）：升级react-scripts到适配版本 #

1. 卸载旧版react-scripts：

npm uninstall react-scripts

2. 安装最新稳定版react-scripts：

npm install react-scripts@latest

3. 删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件，重新执行依赖安装：

npm install

4. 修正组件导入语句：

import { Form } from "react-bootstrap";

5. 重启项目即可正常使用react-bootstrap组件。

方案2（不升级react-scripts的兼容方案） #

如果你的项目因为其他依赖限制无法升级react-scripts，可降级react-bootstrap到兼容旧版构建工具的1.x版本：

1. 卸载当前版本的react-bootstrap和bootstrap：

npm uninstall react-bootstrap bootstrap

2. 安装兼容旧版react-scripts的版本：

npm install react-bootstrap@1.6.6 bootstrap@4.6.2

3. 修正导入语句为解构写法，重启项目即可。

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