Error occurred in demo of https://github.com/reactwg/react-18/discussions/37

[wonsure2]

Error occurred after the hydration, which leads to blank UI content. Is this demo code out of date?

https://codesandbox.io/s/kind-sammet-j56ro?file=/src/App.js

[gaearon]

Hmm, I don't see this in the linked sandbox. Did you edit anything?

[wonsure2]

Hi, @gaearon

It turns out that a Chrome extension(a translation tool) caused the error.

I find out that this Chrome extension will insert a <style>...</style> between </body> and </html> in the DOMContentLoaded event callback. This caused the difference between the server output HTML and the client rendering HTML.

I'm not sure whether inserting style tag between body and html closing tags is a common pattern in Chrome extension design, if so, then there might be more problems like this?

[gaearon]

This might be getting fixed by facebook/react#24523. In that case it would still show a message but would at least be able to recover.

[gaearon]

We also have a bigger planned section of work aimed to address this in a more resilient way. But for now this is going to cause mismatches and (after the fix in 18.2) revert to a clean client render instead of an empty page.