How can I reproduce it? Do I need to switch between two commits?

It happens for me on main. The linked issue has a video

• It goes away locally if you rm -rf packages/website/build

Does the packages/website/build before come from an older commit? Or do I just need to build and build again?

Never mind, I can reproduce it now...

This is not a cache problem (because I started fresh), but a hydration issue. Here's the HTML before hydration (with JS disabled):

Here's what's after:

The classNames are applied to the wrong element. This is a quintessential issue of markup mismatch between SSR and first CSR. In this case, the culprit is that the initial HTML is wrong—note how there are two empty <p> tags in the first screenshot! This prompts me to think it's caused by the minifier trying to parse invalid HTML. So I went back and noticed a common pitfall: we are rendering a <div> inside a <p>, which is invalid because <p> only accepts phrasing content. Because the end tag of <p> can be omitted, a conforming HTML parser can interpret the <div> tag as the implicit end of the <p> tag, which is what the minifier is doing, thus causing the issue. A similar issue of invalid HTML was reported here: facebook/docusaurus#8235

You can see for your self with this very simple repro:

const $ = require("react").createElement;
const { minify } = require("html-webpack-plugin/node_modules/html-minifier-terser");

function Home() {
  return $("p", null, $("div", null));
}

const html = require("react-dom/server").renderToString($(Home, null));
console.log("Raw render:");
console.log(html);
console.log("Minified:");
minify(html).then(console.log);

Raw render:
<p><div></div></p>
Minified:
<p></p><div></div><p></p>

The solution is to fix the markup because we should write conformant HTML.

I'm surprised there isn't a lint rule in eslint-plugin-react for this.

I found this 3rd party plugin:
https://github.com/MananTank/eslint-plugin-validate-jsx-nesting

This is quite hard to validate, particularly in this case where it's <p>{description}</p> and description is an external variable containing a <div>... It needs some sort of reference tracing.

I'm also pretty sure react does log a warning here when it does the rendering. It contains utils that validate the DOM structure iirc.

Yeah we should add an end-to-end test to make sure no React warnings are logged. #6354

Thanks!