Open jazeved0 opened 1 year ago
I've also seen this issue, but using a different tag:
<span>…</span>
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
🏓
React version: 18.2.0
Steps To Reproduce
<noscript
JSX element with text children that contains an HTML entity, such as'
:ReactDOMServer.renderToString
(no visible warnings appear):Of note, this appears to replace the HTML entity in final HTML output with a different entity:
hydrateRoot
:UI mismatch error occurs at hydration time
Link to code example: https://github.com/jazeved0/react-ssr-noscript-bug-reprod (steps to build/run are in the readme)
The current behavior
Using an HTML entity in the direct text children of a
<noscript>
tag results in hydration errors on the client. I encountered this while building a Gatsby static site where I wanted to include a<noscript>
-wrapped warning in a component that only works when JavaScript is enabled (and this message includes an apostrophe character).The following cases encounter the same/a similar error:
Same example as above (and the one I originally encountered):
The following cases do work:
Wrapping the text containing the HTML entity in a plain
<div>
, inside the<noscript>
:dangerouslySetInnerHTML
:The expected behavior
All of the above cases (except wrapping the HTML entity in a
<div>
) should result in the same behavior, and exhibit no errors when hydrating on the client.I believe this may be related to https://github.com/facebook/react/issues/11423 (although notably the behavior of "ignore