facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
224.98k stars 45.87k forks source link

Bug: Hydration mismatch error for HTML entities in direct text children of <noscript> tag #25969

Open jazeved0 opened 1 year ago

jazeved0 commented 1 year ago

React version: 18.2.0

Steps To Reproduce

  1. In a React SSR app, include a <noscript JSX element with text children that contains an HTML entity, such as &apos;:
    export default function App() {
      return <noscript>&apos;</noscript>;
    }
  2. Render the React app on the server using ReactDOMServer.renderToString (no visible warnings appear):
    const component = ReactDOMServer.renderToString(<App />);

    Of note, this appears to replace the HTML entity in final HTML output with a different entity:

    ...<noscript>&#x27;</noscript>...
  3. Attempt to hydrate the React app on the client using hydrateRoot:
    hydrateRoot(document.getElementById("root"), <App />);
  4. UI mismatch error occurs at hydration time

    image

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:

The following cases do work:

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

brettdh commented 7 months ago

I've also seen this issue, but using a different tag:

<span>&hellip;</span>
github-actions[bot] commented 2 months ago

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!

brettdh commented 2 months ago

🏓