0

I've scaffolded an SPFX Project using Yeoman generator and added react-bootstrap as a dependency.

Whenever I use any of the react-bootstrap component and gulp serve it, I get the below errors. Has anyone got clue on how to resolve this? Thanks.

**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**
Improve this question

1 Answer 1

Reset to default
3

The current release of @microsoft/generator-sharepoint defaults to TypeScript 3.7. This causes build breaks when customers use libraries that have been written on newer releases. Please update the default installed compiler to 3.9 or greater.

Fluent UI has a minimum requirement of TS 3.9 (published May 2020.) When using language features in TS 3.9, they cause issues with customers on older releases. Subsequently customers using the yeoman template to generate a webpart will hit TypeScript issues using libraries like Fluent UI.

Customers can work around this by replacing @microsoft/rush-stack-compiler-3.7 with @microsoft/rush-stack-compiler-3.9.

Please run following cmdlet

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

and update tsconfig

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.