Bug: React 18 adds empty HTML comment tags in SSR markup

[nbouvrette]

React version: 18

Steps To Reproduce

1. Clone https://github.com/Avansai/next-multilingual
2. run: npm install
3. run: npm build
4. run: npm run start-example
5. Go to the following URL: http://localhost:3000/en-us/tests/jsx-injection
6. Right-click on "simple link" (first sentence) and look at the HTML code - there are no HTML comment tags
7. Kill the app, and update the react and react-dom package to version 18.0
8. Re-run steps 2 to 5
9. Right-click on "simple link" (first sentence) and look at the HTML code - there are empty HTML comment tags

Link to code example:

https://github.com/Avansai/next-multilingual

The current behavior

When injecting JSX element in localizable text, there are now empty HTML comment tags - this is new with React 18:

The expected behavior

I would expect that there are no empty HTML comment tags:

I tried to look in the release notes, and was wondering if this commit might be related?

[gaearon]

I believe this is intentional due to new constraints in the streaming renderer, see #21099. It’s possible we’ll find some way to avoid it, but for now it works like this.

[nbouvrette]

I believe this has been fixed with #24630 ? We can close this issue?

[gaearon]

Sure, do close if it works now! I think it'll still have comments in some cases but there should be fewer.

[nbouvrette]

I'll let someone else re-open a new issue if they can still reproduce this because, on my end, all my tests are passing!

[gempir]

I'm still having issues. I'm on React/React-Dom 18.2.0

My component looks like this:

{index === 0 && <>
    <strong>Dieser Artikel:</strong> {product.productName}
</>}

Bundler output:

children: [index === 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.Fragment, {
                      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)("strong", {
                        children: "Dieser Artikel:"
                      }), " ", product.productName]

So there is a space and there should be a space.

The SSR produces the following string

<strong>Dieser Artikel:</strong><!-- -->Vicco &#x27;Sherry&#x27; Schminktisch mit LED-Beleuchtung, Spiegel und 5 Schubladen, Spanplatte weiß, 75 x 55 x 120 cm

What does that mean, why is there an empty comment now.

And then in the client/chrome it looks like this:
Visually there is some space between those 2 elements.

And react-dom complains in the console that there is a mismatch between client and server.

Text content did not match. Server: "Vicco 'Sherry' Schminktisch mit LED-Beleuchtung, Spiegel und 5 Schubladen, Spanplatte weiß, 75 x 55 x 120 cm" Client: " "

I'm very confused where that Client: " " comes from, because clearly there is more content in that component and at no point is there only a space.

[runoncedev]

I'm facing this issue with Next.js 13, whenever I have a {" "} in my JSX, the resuling HTML will include an empty comment like <!-- -->. And for some reason having this empty comment interfers with the triple-click text selection (in Chrome at least), which really hurts the UX.

[cw1997]

I'm facing this issue with Next.js 13, whenever I have a {" "} in my JSX, the resuling HTML will include an empty comment like <!-- -->. And for some reason having this empty comment interfers with the triple-click text selection (in Chrome at least), which really hurts the UX.

I saw that PR #21099 mentions this is an performance optimization for SSR hydration.
But I still meet this situation when I use next export (Static Generation), I think it is unnecessary for Next.js Static Generation.