search

SharePoint / sp-dev-docs

SharePoint & Viva Connections Developer Documentation
https://docs.microsoft.com/en-us/sharepoint/dev/
Creative Commons Attribution 4.0 International
1.24k stars 1k forks source link

SPFX Listview CommandSet extension failure with React #321 error #9640

Open balazsbodis opened 4 months ago

balazsbodis commented 4 months ago

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

Additional environment details

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: image The developer console: image 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: download

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

  4. I did the following changes on the Commandset code: download 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: image

balazsbodis commented 4 months ago

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.