Closed mbest closed 1 year ago
Thanks for filing this issue with us and sorry about the frustration caused. The team will investigate this issue but to set expectations the developers will only review this issue once personal capacity allows. I do see you maybe/ or might be willing to contribute to this issue? If you have a current solution and would like to share your PR with us, our team will gladly review it.
@GeoffCoxMSFT - Would you be able to confirm if this is a regression or behavior issue? cc @tomi-msft
Let's make sure this doesn't affect future versions of the icon library and see if there's a straight forward fix for react-icons-mdl2
.
Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.
Still require assistance? Please, create a new issue with up-to date details.
Copied from #17326:
Environment Information
(I'm going to create my own structure for this bug, as it isn't reproducible in Codepen and is a bit of a niche bug).
Issue
The issue is prefaced with a question - does Fluent support multiple React apps on the page at the same time? I believe the answer is yes, I'll assume as much for this bug at least, but if it expressly doesn't support this, then this isn't an issue.
Due to
registerIcons
storing its icons in thewindow
object, now thatfluentui/react-icons-mdl2
has a call to a hook in its icons, if I register an icon from that package in two different apps and try to render it, an error will be thrown.Let's say
AppX
andAppY
both register"screentime"
:<ScreenTimeIcon />
(an icon that's inreact-icons-mdl2
but not in the default icon set).AppX
happens to register its icons first, so the actual component stored in thewindow
object comes from this app. WhenAppY
tries to register the icon, it just gets a warning - the icon in thewindow
object was still registered byAppX
.If I were to then try and actually render an
<Icon />
with theiconName
of"screentime"
inAppY
, React will throw a "Minified error 321 - No hooks calls outside of a component". This is because even though theuseIconSubset
hook call is safely in a component, because the component is coming from an entirely different app, React thinks that the hook is being called unsafely.I have a whole heck of a lot more info about this, feel free to reach out to me (alias = @ibrosen ) and I can provide screenshots / stack traces etc.
Possible solutions
The best solution would be to not store icons in the window object
Priorities and help requested:
Are you willing to submit a PR to fix? (Yes, No) Maybe, it will be a lot of work to re-imagine icon storage though
Requested priority: (Blocking, High, Normal, Low) Normal. This did cause a live-site incident for us, but we've mitigated it.
Products/sites affected: (if applicable) account.microsoft.com