I’m trying to use Fluent UI React v9 controls in a SharePoint Framework (SPFx) 1.21.1 web part, but I’m running into multiple TypeScript errors and cannot get even a single control to render.
Here are my environment details:
- SPFx: 1.21.1
- Node.js: v22 (LTS)
- TypeScript: v5.3
- React: v17.0.1
I followed the Fluent UI v9 guidelines: Fluent UI React v9 Quick Start
When I try to add any Fluent UI v9 control (e.g., Button, TextField), I get runtime TypeScript errors like these:
Error - [tsc] src/webparts/fluentUi9Demo/components/FluentUi9Demo.tsx(81,29): error TS2322: Type 'string' is not assignable to type 'never'. Error - [tsc] src/webparts/fluentUi9Demo/components/FluentUi9Demo.tsx(82,16): error TS2745: This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided. ...
These errors repeat for almost all JSX elements I try to render.
Issue: It seems that Fluent UI React v9 types are not compatible with SPFx 1.21.1 + TypeScript 5.3 + React 17. I’m unable to render even a simple Button without TypeScript errors.
Thanks in advance!
**What I’ve tried: ** Installing Fluent UI v9 via npm install @fluentui/react-components Following the official v9 React quick start guide Verifying TypeScript and React versions compatibility
**Expected Behavior **
- The web part compiles without any TypeScript errors.
- The Fluent UI v9 Button renders correctly on the page.
- The button displays the text “Click Me”.
- The button is fully interactive (clickable) and applies the primary appearance styling.
