SPFX项目引入react-bootstrap后执行gulp serve出现tsc报错如何解决？

问题根源 #

你遇到的报错是版本兼容性问题导致的：当前SPFX项目内置的TypeScript版本为3.7.7，而你安装的最新版react-bootstrap依赖的@popperjs/core使用了TypeScript 3.8才支持的import type语法，低版本TS无法识别该语法，因此抛出语法错误。

解决方案 #

方案1：安装兼容低版本TS的react-bootstrap（推荐） #

该方案无需修改项目配置，稳定性更高：

• 先卸载当前已安装的依赖：

npm uninstall react-bootstrap @popperjs/core

• 安装兼容TS3.7的1.x版本react-bootstrap：

npm install react-bootstrap@1.6.8

安装完成后重新执行gulp serve即可正常运行。

方案2：跳过第三方库类型检查 #

如果必须使用新版react-bootstrap的特性，可以通过修改TS配置跳过对第三方依赖的类型校验：

• 打开项目根目录下的tsconfig.json文件
• 在compilerOptions配置项中新增以下两个参数：

{
  "compilerOptions": {
    // 原有配置保持不变，新增如下两行
    "skipLibCheck": true,
    "skipDefaultLibCheck": true
  }
}

保存配置后重新执行gulp serve即可。

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