New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: v9's Provider doesn’t hydrate from SSR properly in StrictMode #23620
Comments
Did you follow the setup guide https://react.fluentui.dev/?path=/docs/concepts-developer-server-side-rendering--page? I don't see |
Your point about
|
I see that you are using React 18 (at least in CodeSandbox). There is a problem with
Makes sense, I will create a PR to modify it.
I think that it's because you use |
I used |
@AkiraVoid the workaround is to disable Strict mode: // next.config.js
// https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode
module.exports = {
reactStrictMode: false,
}
Edit: not really, it's a different problem. You can disable |
@layershifter I am actually using 9.2.0, so I don’t think it has been fixed. |
@AkiraVoid ^ check the recent edit 🐱 I just checked and indeed the only solution for now is to disable |
And, since v8, the numbers after class names seem to be a problem in SSR (also mentioned in this thread). Should I open another issue about this? |
Nope, we will track this problem there. To be honest, v8 has a bit different issue than we have there. For context, it's more or less the same as in other libraries (chakra-ui/chakra-ui#4328 (comment)). For now, I will put a warning into my existing PR to docs to highlight the problem. |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
-- Backlog review @sopranopillow is doing the main work on this topic right now, so please continue focusing on this and collaborate with @layershifter on it. |
Library
React Components / v9 (@fluentui/react-components)
System Info
Are you reporting Accessibility issue?
no
Reproduction
https://github.com/OfficeDev/fluent-blocks/tree/feat/sample-app
Bug Description
Actual Behavior
The Provider won’t apply styles in certain situations when it’s been rehydrated. Sometimes when hot reloading certain styles aren’t applied, and certain styles are always missing from tooltips and menus which v9 renders in a sibling provider with a different-numbered class name from the primary provider (e.g. the primary will have
fui-FluentProvider1
, but tooltip & menu providers will havefui-FluentProvider2
).This could possibly be construed as an accessibility bug since it causes tooltips & menus to blur and unmount right after mounting.
Expected Behavior
In Storybook and other SPA situations the Provider behaves as expected – it seems aware that other providers have been rendered, and when new tooltips or menus appear they appear in a provider element with the same
n
in their class name as their relevant provider sibling, e.g.57
infui-FluentProvider57
.Steps to reproduce
I'm working on getting a truly minimal reproduction running on Vercel (this can’t be reproduced on CodeSandbox since it’s an SSR issue) but wanted to log this in case I missed something and this is easily resolved.
Logs
Requested priority
High
Products/sites affected
Fluent Blocks, Teams Developer Portal
Are you willing to submit a PR to fix?
yes
Validations
The text was updated successfully, but these errors were encountered: