Bug: JSX string interpolation throws erroneous error on hydrateRoot

[dickie81]

hydrateRoot seems to have issues with jsx string interpolation. hydrateRoot seems to see the the inline string as separate on the client and can't match the unbroken string rendered by the server.

react-dom.development.js:73 Warning: Text content did not match. Server: "Jaguar shark!" Client: "Jaguar " at p at App1
react-dom.development.js:73 Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.

React version: 18.2.0

Steps To Reproduce

This is the simplest example I could muster, obviously I would not normally write JSX in this fashion but it illustrates the issue.

HTML:

<div id="root"><p>Jaguar shark!</p></div>

JS:

const App = () => (<p>Jaguar {'shark!'}</p>);

ReactDOM.hydrateRoot(document.getElementById("root"), <App />, {
  onRecoverableError: (err) => {
    alert('error found: ' + err);
  }
});

Link to code example:
https://codepen.io/Dickie81/pen/xxJVwmp

The current behavior

Throws error. Re-renders dom.

The expected behavior

hydrates without complaint

[nmain]

How did you get that HTML? It doesn't seem to match what React generates serverside:

const React = require("react");
const ReactDOMServer = require("react-dom/server");
const App = () => (<p>Jaguar {'shark!'}</p>)
ReactDOMServer.renderToString(<App />);

<p>Jaguar <!-- -->shark!</p>

[dickie81]

@nmain great point - it seems something is stripping comments on our implementation. Thanks for pointing out the obvious mistake!