[Bug]: placing two different spfx components on one sharepoint page removes the syling for both

[PauwelsYoran]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1255U
    Memory: 15.48 GB / 31.64 GB
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.50)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://codesandbox.io/s/stupefied-fermat-9gfwe6?file=/src/index.js

Bug Description

Actual Behavior

I created two different spfx webparts, using the latests yeoman gen. Both contain a fluent ui card component.
When placing both on a single sharepoint webpage the styling gets removed from both webparts (see screenshot). Functionally they both still work, just the styling is removed. This is the same effect as if i would remove the fluent provider from my code.

it would be the same result as deploying the repro i provided as an spfx webpart twice (so two different onces).
It does not only affect card components but multiple fluent ui components

Expected Behavior

I would like to be able to have both components on one page with styling applied.

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[layershifter]

Please provide a reproduction case preferably on CodeSandbox/Stackblitz that we can check 🙏

[PauwelsYoran]

Hi, i provided a link to the code for both wenparts in Code sandbox.
I dont know how to set up a full case since this issue only occures when deploying the webparts to a sharepoint page...
(or deploying one and running one locally)

[layershifter]

I see. Can you please create then a repository on Github that we can clone and write a set of actions that we can do to see the problem? 🙏

[PauwelsYoran]

https://github.com/PauwelsYoran/DemoFluentuiBug/tree/main

I published a repo with the code.
There is a folder that has two webparts. Simply deploy these sppkg's to the sharepoint app catalog.
then add both webparts to a page (

)
Now publish the sharepoint page and refresh the page. Now you will see that both buttons lost their outline. which is not the case if you only deploy one

2 webparts

1 webpart

[layershifter]

There is a folder that has two webparts. Simply deploy these sppkg's to the sharepoint app catalog.

Sorry, but can you please provide detailed reproduction steps? I am not aware how to do deployments or what to do to publish a page 😿

What I mean by detailed steps:

• Open page X
• Click button Y
• Run "npm run A" in folder X
• Upload files from Z to A
• etc.

[PauwelsYoran]

to see the problem:
first add the webparts to the sharepoint app catalog

1. go to https://{sharepoint}/sites/SpAppCatalog/_layouts/15/tenantAppCatalog.aspx/manageApps with sharepoint admin rights
2. here drag both sppkg files one at a time into the sharepoint list
3. you can find both files in the following folder https://github.com/PauwelsYoran/DemoFluentuiBug/tree/main/spfx%20Webparts
4. a popup will show up to deploy over all sites, click yes
5. now the webparts are available on your sharepoint sites

add webpart to a site

1. go to sharepoint site where you are a site owner
2. click on the cogwheel top right and click add new page
3. selectblank template
4. give the page a title
5. hover on the page untill you see the plus sign
6. search for demo and click to add the first web part
7. repeat the same steps to add the second webpart to the page
8. on the top right click publish
9. At first the webparts will look okay, but when you refresh the page the styling will be removed

here is also the official microsft documention to deploy this in case my steps are un clear
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page

[layershifter]

I was able to reproduce it, thanks for detailed description @PauwelsYoran 👍

This is an interop problem: multiple FluentProviders collide as they come from different bundles 💥 We have faced the similar problem before, the solution is to use IdPrefixProvider in such cases, i.e.

<IdPrefixProvider value="APP1-">
  <FluentProvider>
    {/* app provider */}
  </FluentProvider>
</IdPrefixProvider>

More details can be found on the PR: #26496

---

@PauwelsYoran can you please try and check if it solves your problem?