SPFX Listview CommandSet extension failure with React #321 error

[balazsbodis]

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
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version: Edge 123.0.2420.81
• SPFx version: 1.18.2
• Node.js version: 18.18.0
• FluentUI version: 8.106.4
• React/ReactDOM version: 17.0.1

Describe the bug / error

We are facing an occasional issue with our SPFX Listview Commandset extension when rendering some Fluent ui react components in a Fluent ui Dialog component on the execution of the CommandBar button:

The developer console:

I stripped down our application and tried several things to eliminate the bug, like the following:

1. Double checked if the code doesn't contain indeed some misuse of hooks.
2. Tried with fluent ui version 7.
3. Removed the content of the dialog to only render an empty fluent ui dialog.
4. Even tried to completely remove the fluent ui components and invoked the sp-dialog to alert a raw text message.

After all these attempts I created a new yeoman generated commandset extension project and modified that one to show an empty fluent dialog on command execution.

All my attempts resulted to this occasional react #321 error. I would say in 80% of the page loads the commandset execution worked fine and rendered the test content. in 20% of the page loads however the dialog could not be rendered and the above react minified error showed up in the console. If the execution worked after page load then it worked forever, if the execution failed after page load, then it failed forever.

I tested it altogether on 3 sites and 2 tenants. All of them produced the above error.

My conclusion was that I cannot make the spfx commandset work with fluent ui dialog component or with sp-dialog, despite I'm using these libraries on all my spfx webpart projects without similar issue.

Thank you in advance!

Steps to reproduce

1. Generate a new 1.18.2 Commandset extension with yeoman

2. Add the highlighted dependencies:
   

3. I modified the elements.xml as I wanted the commendset to be available for my library:
   

4. I did the following changes on the Commandset code:
   
   Note 1: I changed the extension of the commandset file from .ts to .tsx to allow JSX.
   Note 2: The pnpjs dependency is not even used in this test project. Probably it could be removed.

Expected behavior

Dialog shows up flawlessly on spfx commandset execution:

[balazsbodis]

As a workaround solution I did a downgrade to SPFX 1.15.2 which uses react 16 and "office-ui-fabric-react" v7.
It resolves the issue, however I would rather use the latest if possible.