You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
I believe that the NamespacesConsumer component released in v8 breaks React SSR, and that this has something to do with the nested context providers/consumers.
Open localhost:3000 in a browser, with the console open
Observe flicker in render due to broken SSR, and warning in console
You can also do a perf recording in the Chrome dev tools to take a closer look at the white flash that happens due to the broken SSR. The console warning that appears will be something like this:
Warning: Did not expect server HTML to contain a <button> in <div>.
This is a very cryptic error (as mentioned in @jamuhl's original code for the NextJs example), but ultimately can be traced back to warnForDeletedHydratableElement.
I compared the HTML returned by the initial doc request to the resulting HTML after clientside render, and found no difference. This leads me to believe the SSR breakage has something to do with context:
I have no idea why the component tree would look like this in the first place.
Crucially, if you remove just the HOC in components/LocaleSwitcher in my given example, the error will go away and SSR will not be broken - no more flicker / clientside re-render. This withNamespaces HOC is coming directly from react-i18next core.
I'm not sure if this bug is contained to just NextJs SSR, or React SSR in general. Is there a working vanilla React SSR example somewhere? I looked but could not find one.
Expected behaviour
Built-in components from react-i18next should not break SSR.
OS (please complete the following information):
Device: MBP 2018 13
Browser: Chrome 70.0.3538.77
Additional context
This bug is currently blocking #609. @jamuhl It would be fantastic if you can take a look at this as soon as possible. I hope it is an easy fix, but I'm not really sure where to start in terms of debugging.
The text was updated successfully, but these errors were encountered:
Describe the bug
I believe that the
NamespacesConsumer
component released in v8 breaks React SSR, and that this has something to do with the nested context providers/consumers.Occurs in react-i18next version
v8.0.6
To Reproduce
Steps to reproduce the behaviour:
yarn && yarn dev
localhost:3000
in a browser, with the console openYou can also do a perf recording in the Chrome dev tools to take a closer look at the white flash that happens due to the broken SSR. The console warning that appears will be something like this:
This is a very cryptic error (as mentioned in @jamuhl's original code for the NextJs example), but ultimately can be traced back to
warnForDeletedHydratableElement
.I compared the HTML returned by the initial doc request to the resulting HTML after clientside render, and found no difference. This leads me to believe the SSR breakage has something to do with context:
I have no idea why the component tree would look like this in the first place.
Crucially, if you remove just the HOC in
components/LocaleSwitcher
in my given example, the error will go away and SSR will not be broken - no more flicker / clientside re-render. ThiswithNamespaces
HOC is coming directly fromreact-i18next
core.I'm not sure if this bug is contained to just NextJs SSR, or React SSR in general. Is there a working vanilla React SSR example somewhere? I looked but could not find one.
Expected behaviour
Built-in components from
react-i18next
should not break SSR.OS (please complete the following information):
Additional context
This bug is currently blocking #609. @jamuhl It would be fantastic if you can take a look at this as soon as possible. I hope it is an easy fix, but I'm not really sure where to start in terms of debugging.
The text was updated successfully, but these errors were encountered: