samples/react-fluentui-9 project not building

[AndyHOvine]

I would like to use the newer fluent UI controls (v9) in my SharePoint Web Part and found this project.

I first attempted to replicate the set up from this project. I am using the same version of SPFx. Installed fluent UI:
npm install @fluentui/react-components

However, when I add a Button for example:

import { Button } from '@fluentui/react-components';
...
...in render...
<Button>Button</Button>

I get an error: This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided.

I also get errors attempting to wrap the FluentProvider:

      const element: React.ReactElement<{}> = React.createElement(YourProfilePage, {});
      const fluentElement: React.ReactElement<FluentProviderProps> = React.createElement(
        FluentProvider, 
        { theme: webLightTheme }, 
        element
      );

I then grabbed this sample project (samples/react-fluentui-9) and I get the same errors as in my project. Examples amongst the wall of red:

Error - [tsc] src/webparts/fluentUi9Demo/components/FluentUi9Demo.tsx(62,10): error TS2745: This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided.

and

Error - [tsc] src/webparts/fluentUi9Demo/FluentUi9DemoWebPart.ts(48,11): error TS2322: Type 'DetailedReactHTMLElement<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>' is not assignable to type 'ReactElement<FluentProviderProps, string | JSXElementConstructor<any>>'.

The only success I had was installed a very old release candidate of @fluentui/react-components (I think it was RC5), which works. Such an old version would not be a good idea, but I also see this project has a more recent version too.

What am I doing wrong? Can anyone help?

[Sandeep-FED]

Did you found any fix for this? Also which version of SPFx are you using?

[AndyHOvine]

I happen to be on the same version as the sample 1.20.0.

"@microsoft/sp-core-library": "^1.20.0"

So far no luck. A colleague is also experiencing same errors when building.

[tomwjerry]

I guess the sample only runs at node v18, silly, I know. Maybe better luck running web components instead of the react one (but react is better).

[AndyHOvine]

You've got it working in 18?

[tomwjerry]

No, too much hassle with several npm versions. BUT! You can try this in package.json:
Basically, change the typescript line, and add the "overrides" section below.

"devDependencies": {
    ...blahblahbla...
    "typescript": "~5.9.2"
  },
  "overrides": {
    "@microsoft/rush-stack-compiler-5.3": {
      "typescript": "$typescript"
    }
  }

Edit: For css variables to work in web part:

<IdPrefixProvider value="uniqueid-">
        <FluentProvider theme={props.theme}>
        ....
        </FluentProvider>
</IdPrefixProvider>

Now, the biggest problem is that it does not appear to get the css variables, but I suppose you can output them in a styletag or something.

Wow, this is so weird. Add the spfx component for the first time, no css vars. Add another same spfx, the css vars load.

Okay, the issue seems to be that when you add the first FluentProvider, it gets the same ID as other FluentProviders. Yes, workbench.aspx already has FluentProviders, apparently, per default? For those navigation, tooltips, and stuff. So we either need to find out how we can assign a unique ID to our FluentProvider. Another option is, of course, to go with the full page spfx layout, the one you customize pretty much everything, instead of this workbench thingy.

Alright, I think I solved it at least!