Bug: `suppressHydrationWarning` is not taken into account in production builds in React 18

[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-build
5. Go to the following URL: http://localhost:3000/fr-ca/tests/routes-dynamiques/123
6. Open the console log: no errors
7. Kill the app, and update the react and react-dom package to version 18.0
8. Re-run steps 2 to 5
9. Open the console log: lots of hydration errors #425, #418 and #423.

Link to code example:

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

The current behavior

Using React 18, the tests are failing because of the errors being thrown in the console.

I confirmed this was related to suppressHydrationWarning because as soon as I removed the following code from: https://github.com/Avansai/next-multilingual/blob/main/example/pages/tests/dynamic-routes/%5Bid%5D.tsx#L37

<tr>
  <td>{messages.format('rowLocalizedWithAsPath')}</td>
  {/* Adding `suppressHydrationWarning` until
  https://github.com/vercel/next.js/issues/32772 is resolved */}
  <td suppressHydrationWarning={true}>{asPath}</td>
</tr>

The errors stop. However, I could not find any mention that suppressHydrationWarning was no longer supported with React 18 and these errors are only triggered on builds, not in dev mode (which is why I am opening this issue)

The expected behavior

suppressHydrationWarning should prevent these errors from being thrown.

[gaearon]

I confirmed this was related to suppressHydrationWarning because as soon as I removed the following code from: https://github.com/Avansai/next-multilingual/blob/main/example/pages/tests/dynamic-routes/%5Bid%5D.tsx#L37

If you removed both of these <td>s, could it be that the errors are caused by the other one you removed?

Have you checked whether this works?

<tr>
  <td suppressHydrationWarning={true}>{messages.format('rowLocalizedWithAsPath')}</td>
  <td suppressHydrationWarning={true}>{asPath}</td>
</tr>

?

[gaearon]

run: npm run start-example-build

I'm not able to follow this step. First it says I have no cross-env (then I installed it locally), then it says I have no @next/bundle-analyzer (then I installed it locally), then it couldn't find next-multilingual/config (at this point I gave up). Would you mind amending the instructions to reproduce cleanly? Thanks!

[gaearon]

Ideally it would be nice to get a minimal repro too, that doesn't involve a whole project repository.

[gaearon]

OK, I got the project running.

This is a bug in React.

[gaearon]

This will be fixed by #24271. Thanks for reporting!

[nbouvrette]

Thanks @gaearon - sorry I didn't have a chance to provide a simpler repo to reproduce this!