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!

[gaearon]

Fix out in 18.1.0.

[myesua]

Hi,
I can still confirm this bug in 18.2.0

[reneeichhorn]

Another interesting issue (but I'm not sure if it is related) is that when you have multiple elements that have hydration mismatches but are ignored / suppressed it is enough for one of them to be not suppressed to make them all fail hydration.
I made a small repro sandbox: https://codesandbox.io/s/sharp-wescoff-v2ffp9?file=/src/App.js

Here you will see that each of the CauseHydrationMissmatch component instances will produce one hydration error even though only one of them has suppressHydrationWarning set to false. Setting that one to true will remove all hydration issues again. My expectation would be that only the one instance that is not suppressing would report an error and all others are fine.

In the development build I'm only seeing this once.

[krzy789]

This error still occurs in 18.2.0

[jonathandewitt-dev]

@gaearon can we reopen this issue? Seems a lot of people including myself are facing issues in 18.2.0

[daveleee]

The hydration warning you're seeing is most likely related to the use of next/navigation and next-auth/react packages. These packages are not part of the Next.js core and might not support server-side rendering (SSR) or hydration out of the box.

I believe using suppressHydrationWarning is more like ignoring the warning rather than finding the optimal solution. It's like just hiding letters but still exist. The better approach I think is to utilize dynamic, state, useEffect OR remove the unnecessary dependencies on next/navigation or next-auth/react. In my case, it's resolved by removing useSession from next-auth/react and useSearchParams from next/navigation.
References:
https://nextjs.org/docs/messages/react-hydration-error
https://nextjs.org/learn/foundations/from-javascript-to-react/adding-interactivity-with-state