spfx 項目中 react-bootstrap 的 tsc 錯誤

Question

我使用 Yeoman 生成器搭建了一個 SPFX 項目，並添加了 react-bootstrap 作為依賴項。

每當我使用任何 react-bootstrap 組件和 gulp 服務它時，我都會收到以下錯誤。 有沒有人知道如何解決這個問題？ 謝謝。

**Starting subtask 'tslint'...
[13:10:02] [tslint] tslint version: 5.12.1
[13:10:02] Starting subtask 'tsc'...
[13:10:02] [tsc] typescript version: 3.7.7
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/createPopper.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/createPopper.d.ts(1,28): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/createPopper.d.ts(1,33): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/applyStyles.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/applyStyles.d.ts(1,31): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/arrow.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/arrow.d.ts(1,46): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/arrow.d.ts(2,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/arrow.d.ts(2,32): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/computeStyles.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/computeStyles.d.ts(1,67): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/eventListeners.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/eventListeners.d.ts(1,31): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/flip.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/flip.d.ts(1,56): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/flip.d.ts(2,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/flip.d.ts(2,40): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/hide.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/hide.d.ts(1,31): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/offset.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/offset.d.ts(1,32): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/offset.d.ts(2,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/offset.d.ts(2,46): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/popperOffsets.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/popperOffsets.d.ts(1,31): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/preventOverflow.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/preventOverflow.d.ts(1,56): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/preventOverflow.d.ts(2,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/modifiers/preventOverflow.d.ts(2,46): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(1,48): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(2,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(2,44): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(3,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(3,35): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(4,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(4,35): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(5,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(5,37): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(6,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(6,45): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(7,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(7,44): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(8,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(8,36): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(9,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(9,46): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(10,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/types.d.ts(10,42): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/utils/detectOverflow.d.ts(1,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/utils/detectOverflow.d.ts(1,49): error TS1005: ';' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/utils/detectOverflow.d.ts(2,13): error TS1005: '=' expected.
[13:10:11] Error - [tsc] node_modules/@popperjs/core/lib/utils/detectOverflow.d.ts(2,65): error TS1005: ';' expected.
[13:10:11] Error - 'tsc' sub task errored after 9.02 s 
 exited with code 2**

Answer 1

@microsoft/generator-sharepoint 的當前版本默認為 TypeScript 3.7。 當客戶使用在較新版本上編寫的庫時，這會導致構建中斷。 請將默認安裝的編譯器更新到 3.9 或更高版本。

Fluent UI 的最低要求為 TS 3.9（2020 年 5 月發布）。在 TS 3.9 中使用語言功能時，它們會在舊版本上引起客戶問題。 隨后，使用 yeoman 模板生成 webpart 的客戶將使用 Fluent UI 等庫遇到 TypeScript 問題。

客戶可以通過將@microsoft/rush-stack-compiler-3.7 替換為@microsoft/rush-stack-compiler-3.9 來解決此問題。

請運行以下 cmdlet

 npm uninstall -D @microsoft/rush-stack-compiler-3.7
 npm install -D @microsoft/rush-stack-compiler-3.9

並更新 tsconfig