Typescript SPFx Webpart安装bootstrap后执行gulp serve报popperjs错误

问题根因 #

你使用的SPFx 1.12.1版本默认绑定TypeScript 3.7.7，而Bootstrap 5依赖的新版@popperjs/core的类型定义使用了TypeScript 3.8才支持的import type语法，低版本TS编译器无法识别该语法，因此抛出TS1005语法错误。

解决方案 #

你可以任选以下任意一种方案解决问题：

• 方案一：跳过第三方库类型检查（操作最简单，无功能影响）
  打开项目根目录的tsconfig.json，在compilerOptions配置节点下新增属性：

  "skipLibCheck": true
  

  保存后重新执行gulp serve即可正常编译。

• 方案二：安装兼容TypeScript 3.7的popper版本
  执行以下命令固定安装兼容TS3.7的@popperjs/core版本：

  npm install @popperjs/core@2.9.3 --save
  

  版本安装完成后重新启动编译即可。

• 方案三：降级Bootstrap到4.x版本
  Bootstrap 4依赖旧版popper.js而非@popperjs/core，类型定义完全兼容TS3.7，执行以下命令替换版本即可：

  npm uninstall bootstrap @types/bootstrap
  npm install bootstrap@4.6.2 @types/bootstrap@4.5.0 --save
  

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