SPFX项目安装@fluentui/react后gulp serve报TS1005等错误如何解决

你遇到的TSC语法报错是版本兼容性问题导致：SPFX 1.12.1版本默认绑定的TypeScript版本为3.9，而你安装的@fluentui/react@8.41.1的类型定义文件使用了TS4.0+才支持的新语法，旧版TS编译器无法识别新语法规则，就会抛出TS1005、TS1128这类语法解析错误。

方案1：更换兼容的FluentUI版本（最稳妥，无需修改项目配置） #

SPFX 1.12.1原生兼容FluentUI v7.x系列，该版本依然提供完整的Modal模态弹窗组件能力，完全满足开发需求，操作步骤如下：

• 卸载当前安装的高版本FluentUI：

npm uninstall @fluentui/react

• 安装匹配SPFX 1.12.1的兼容版本：

npm install @fluentui/react@7.199.1 --save

• 执行完成后重新运行gulp serve即可正常启动项目。

方案2：升级项目TypeScript版本（若必须使用FluentUI 8.x） #

如果业务要求必须使用FluentUI 8.x的新特性，可以手动给SPFX 1.12.1适配TS4.x版本：

1. 安装TS4.1版本和对应的SPFX编译适配包：

npm install typescript@4.1.5 @microsoft/rush-stack-compiler-4.1 --save-dev

2. 打开项目根目录的tsconfig.json文件，修改extends配置项指向新的编译规则文件：

"extends": "./node_modules/@microsoft/rush-stack-compiler-4.1/includes/tsconfig-web.json"

3. 删除项目根目录下的npm-shrinkwrap.json文件和node_modules文件夹，重新执行npm install安装所有依赖
4. 依赖安装完成后执行gulp serve，TSC报错即可消除。

• 不建议使用高于8.41.1的FluentUI版本，更高版本会引入更多和SPFX 1.12.1不兼容的逻辑
• npm shrinkwrap操作建议放在所有依赖安装完成、项目可正常运行之后再执行，避免提前锁定错误的依赖版本。

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