[SPFX 1.18.2][Fluent UI 9] - New npm install cause error with latest Fluent UI 9

[rgcircum]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [X] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version : All
• SPFx version : 1.18.2
• Node.js version : 18
• Fluent UI 9.43.3+

Describe the bug / error

After a new npm install on a existant SPFx project who use latest Fluent UI9 cause error on launch server :

Error - [webpack] 'dist':
./node_modules/@floating-ui/devtools/dist/index.js 34:166
Module parse failed: Unexpected token (34:166)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders  
|   var r;
|   const o = e;
>   return !!((r = o == null ? void 0 : o.ownerDocument) != null && r.defaultView && o instanceof o.ownerDocument.defaultView[(n == null ? void 0 : n.constructorName) ?? "HTMLElement"]);
| }
| const E = () => `${i}:${crypto.randomUUID()}`, w = () => {
 @ ./node_modules/@fluentui/react-positioning/lib/usePositioning.js 8:0-49 181:71-79
 @ ./node_modules/@fluentui/react-positioning/lib/index.js
 @ ./node_modules/@fluentui/react-components/lib/index.js
 @ ./lib/webparts/controlsTest/ControlsTestWebPart.js`

Steps to reproduce

1 - Get SPfx Fluent UI 9 Sample (https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-9) 2 - update dependencies to latest version of Fluent UI 9 3 - Launch gulp serve

Expected behavior

The bug has already described on Fluent UI repo without response from Fluent UI Teams (https://github.com/microsoft/fluentui/issues/30116)

It's a blocking bug !

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[shreyas-tarento]

Any update on this

[pjorgesilvaa]

I have the same issue reported.

[vipul1984]

Error - [webpack] 'dist': ./node_modules/@floating-ui/devtools/dist/index.js 34:166 Module parse failed: Unexpected token (34:166) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | var r; | const o = e;

return !!((r = o == null ? void 0 : o.ownerDocument) != null && r.defaultView && o instanceof o.ownerDocument.defaultView[(n == null ? void 0 : n.constructorName) ?? "HTMLElement"]); | } | const E = () => ${i}:${crypto.randomUUID()}, w = () => { @ ./node_modules/@fluentui/react-tooltip/node_modules/@fluentui/react-positioning/lib/usePositioning.js 8:0-49 @ ./node_modules/@fluentui/react-tooltip/node_modules/@fluentui/react-positioning/lib/index.js @ ./node_modules/@fluentui/react-tooltip/lib/components/Tooltip/useTooltip.js @ ./node_modules/@fluentui/react-tooltip/lib/components/Tooltip/Tooltip.js @ ./node_modules/@fluentui/react-tooltip/lib/components/Tooltip/index.js @ ./node_modules/@fluentui/react-tooltip/lib/Tooltip.js @ ./node_modules/@fluentui/react-tooltip/lib/index.js @ ./node_modules/@fluentui/react-migration-v8-v9/node_modules/@fluentui/react-components/lib/index.js @ ./node_modules/@fluentui/react-migration-v8-v9/lib/components/Button/ActionButtonShim.js @ ./node_modules/@fluentui/react-migration-v8-v9/lib/components/Button/index.js @ ./node_modules/@fluentui/react-migration-v8-v9/lib/index.js @ ./node_modules/@pnp/spfx-controls-react/lib/controls/HoverReactionsBar/HoverReactionsBar.js @ ./node_modules/@pnp/spfx-controls-react/lib/controls/HoverReactionsBar/index.js @ ./node_modules/@pnp/spfx-controls-react/lib/HoverReactionsBar.js @ ./node_modules/@pnp/spfx-controls-react/lib/index.js @ ./lib/webparts/tommsurveyclasswp/components/Tommsurveyclasswp.js @ ./lib/webparts/tommsurveyclasswp/TommsurveyclasswpWebPart.js

[zensho-mjp]

Same issue here. Nobody can use Fluent UI 9 at this point without some weird workaround that I haven't found yet. What's the point making it available in such an incompatible state with spfx projects?

[sps-smith]

Same issue here. I will try to use a lower version of Fluent UI

[rgcircum]

If you use the lastest version (9.44.1), normaly, the problem is resolved. I haven't tested. https://github.com/microsoft/fluentui/issues/30116#issuecomment-1881535856

[rgcircum]

It's work with latest version (9.44.1)

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues