Getting issue while implementing FluentUI using SPFx in SharePoint online

Question

I am following this blog to implement the fluentUI in SPFX part, but while doing "Gulp Build" I'm getting the following error:

Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(9,38): error TS1005: ';' expected.      
[05:38:38] Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(10,13): error TS1005: '=' expected.     
[05:38:38] Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(10,33): error TS1005: ';' expected.
[05:38:38] Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(11,13): error TS1005: '=' expected.
[05:38:38] Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(11,33): error TS1005: ';' expected.     
[05:38:38] Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(12,13): error TS1005: '=' expected.
[05:38:38] Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(12,32): error TS1005: ';' expected.     
[05:38:38] Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.d.ts(2,13): error TS1005: '=' expected.
[05:38:38] Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.d.ts(2,40): error TS1005: ';' expected.
[05:38:38] Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.d.ts(4,1): error TS1128: Declaration or statement expected.
[05:38:38] Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.d.ts(4,13): error TS1005: ';' expected
................
.......
.......

user_17104706 · Answer

Just had the same issue. It turns out the latest release of Fluent UI uses TypeScript 3.8 syntax, so you need to update the version used by the SPFx project. Detailed instructions here: https://www.voitanos.io/blog/use-different-typescript-versions-in-sharepoint-framework-projects/. I've actually updated mine to @microsoft/rush-stack-compiler-3.9 and it's working fine now.

user_2043287 · Answer

You can try the following to resolve this issue:

run:

npm i @microsoft/rush-stack-compiler-3.2 typescript@3.2 -D -E

And after update the tsconfig.json file:

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

IF this doen't help try an older version:

npm install @fluentui/react@7.113.0 --save

Getting issue while implementing FluentUI using SPFx in SharePoint online

2 Answers