Skip to content
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

v8 NamespacesConsumer breaks SSR #610

Closed
isaachinman opened this issue Nov 6, 2018 · 1 comment
Closed

v8 NamespacesConsumer breaks SSR #610

isaachinman opened this issue Nov 6, 2018 · 1 comment

Comments

@isaachinman
Copy link
Contributor

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:

  1. Clone demo repo here
  2. Do yarn && yarn dev
  3. Open localhost:3000 in a browser, with the console open
  4. 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:

screenshot 2018-11-05 at 19 35 44

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.

@isaachinman
Copy link
Contributor Author

Context was actual a complete red herring, I believe this was user error on my part.

@i18next i18next locked as resolved and limited conversation to collaborators Nov 6, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant