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

Make clearContainer clear entire document (documentElement, including head and body) so that we can fallback to client rendering document during hydration #22874

Closed
wants to merge 1 commit into from

Conversation

salazarm
Copy link
Contributor

@salazarm salazarm commented Dec 6, 2021

Summary

This fixes #22833 by making clearContainer clear the entire document instead of just the body so that we don't run into Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed. while trying to client render a full page into document.

How did you test this change?

I added a test for the issue being fixed which failed before this change, however I found an old PR discussion saying that legacy behavior was to only clear body but there aren't any tests for this behavior and I don't understand why we'd want this behavior? Users could just render into document.body explicitly rather than relying on this weird behavior?

Also worked in latest FireFox/Chrome/Safari.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Dec 6, 2021
@salazarm salazarm changed the title Make clearContainer clear entire document (head and body) so that we can fallback to client rendering document during hydration Make clearContainer clear entire document (documentElement, including head and body) so that we can fallback to client rendering document during hydration Dec 6, 2021
@sizebot
Copy link

sizebot commented Dec 6, 2021

Comparing: c7917fe...08843ec

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js +0.02% 129.89 kB 129.92 kB +0.02% 41.62 kB 41.63 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.02% 134.64 kB 134.68 kB = 43.00 kB 43.00 kB
facebook-www/ReactDOM-prod.classic.js = 428.08 kB 428.09 kB = 78.60 kB 78.60 kB
facebook-www/ReactDOM-prod.modern.js = 416.64 kB 416.65 kB +0.01% 76.91 kB 76.92 kB
facebook-www/ReactDOMForked-prod.classic.js = 428.08 kB 428.09 kB = 78.60 kB 78.61 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 08843ec

@salazarm salazarm closed this Dec 7, 2021
@salazarm salazarm deleted the canHydrateDocument branch February 10, 2022 14:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

React 18: Non-recoverable hydration mismatch if mismatch occurs in the same boundary as main script
3 participants