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

Why hydrateRoot isn't showing the diff upon error? #23235

Closed
wintercounter opened this issue Feb 6, 2022 · 5 comments
Closed

Why hydrateRoot isn't showing the diff upon error? #23235

wintercounter opened this issue Feb 6, 2022 · 5 comments
Labels
React 18 Bug reports, questions, and general feedback about React 18 Type: Discussion

Comments

@wintercounter
Copy link

Previously with hydrate I could see the difference. Now with hydrateRoot I simply get a general error only. How should debug and find what's causing the issue?

Uncaught Error: An error occurred during hydration. The server HTML was replaced with client content.
@wintercounter wintercounter added React 18 Bug reports, questions, and general feedback about React 18 Type: Discussion labels Feb 6, 2022
@gaearon
Copy link
Collaborator

gaearon commented Feb 7, 2022

I think #23207 is supposed to address this. Did you try after it landed on main?

@gaearon
Copy link
Collaborator

gaearon commented Feb 7, 2022

It would be good to have a minimal reproducing case.

@wintercounter
Copy link
Author

Unfortunately, that callback also gives the same error.

I forked your SSR demo and switched to renderToString as that's my case: https://codesandbox.io/s/romantic-orla-ybx8g
I created another fork where I only added the diff, same results: https://codesandbox.io/s/vibrant-swanson-dh03m

I added intentional diff to Sidebar.js, and upgraded React to the latest RC.

You can see it doesn't tell me what's the diff. I only get Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>..


There is a weird issue with the first sandbox, just ignore it. First I've got an error that it tried to append another html tag into document instead of replacing it. I added the html tag myself now and made that the document root, now it is inserting 2 body tags. Maybe due to the additional analytics script tags or data-attr diffs on body? That's an interesting question also btw. A lot of sites are using dynamically injected scripts (like for example Cloudflare apps) that are out of the user's control. How React hydration will fit in this scenario if that makes hydration fail and causes a forced CSR? (Sry for the offtopic).

On the second one after the React rendering <App /> started to fail when it tries to fallback to CSR, but that's irrelevant also to the case.

@gaearon
Copy link
Collaborator

gaearon commented Feb 11, 2022

This should be fixed by #23241. I've done a cursory check and it appears fixed. Can you please confirm?

@gaearon gaearon closed this as completed Feb 11, 2022
@gaearon
Copy link
Collaborator

gaearon commented Feb 11, 2022

First I've got an error that it tried to append another html tag into document instead of replacing it. I added the html tag myself now and made that the document root, now it is inserting 2 body tags. Maybe due to the additional analytics script tags or data-attr diffs on body?

Sorry, this sounds like a separate thing — would appreciate an isolated sandbox showing just that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
React 18 Bug reports, questions, and general feedback about React 18 Type: Discussion
Projects
None yet
Development

No branches or pull requests

2 participants