Server Error for `Hydration failed ...` and `Text content does not match ...`

[yathomasi]

We are starting to get multiple errors on production due to the recent upgrade to React 18.

Severity:

• mild
• the website doesn't seem to break but it's complaining with errors on the console
• works fine with javascript disabled

Common Errors:

• There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
• Hydration failed because the initial UI does not match what was rendered on the server.
• Text content does not match server-rendered HTML.

Cause: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#other-breaking-changes

Stricter hydration errors: Hydration mismatches due to missing or extra text content are now treated like errors instead of warnings. React will no longer attempt to “patch up” individual nodes by inserting or deleting a node on the client in an attempt to match the server markup, and will revert to client rendering up to the closest <Suspense> boundary in the tree. This ensures the hydrated tree is consistent and avoids potential privacy and security holes that can be caused by hydration mismatches.

Gatsby Discussion:

• https://github.com/gatsbyjs/gatsby/discussions/31943
• https://github.com/vercel/next.js/discussions/35773( similar discussion ongoing on Next.js)

Possible Approach:

• Find what content is causing the error( DEV_SSR seemed to be a solution but it's WIP: https://github.com/gatsbyjs/gatsby/pull/35685)

Resources:

• https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#other-breaking-changes
• https://lihautan.com/hydrating-text-content

Sites:

• [x] dvc.org
• [x] cml.dev
• [x] mlem.ai

[julieg18]

dvc.org pages that are showing these console errors

• any of the doc pages
• home page
• the community page

These errors also only seem to show in production. You can't see them in pr apps or locally.

[rogermparent]

I've managed to pin this down to our Download button's "change depending on OS" functionality! That would explain why I was only able to replicate the error on the home and docs pages.

@julieg18 I couldn't replicate on the community page at all, maybe there was another error that looked like this one? Also, I was able to get a local replication via yarn build && yarn serve, as yarn develop doesn't have any hydration and behaves like a traditional React app.

I'm working on a fix.

[rogermparent]

Fixed by #3675

[LekoArts]

You can try out DEV_SSR with gatsby@next now again.

[yathomasi]

Reopening this issue, as we starting to get similar errors for cml.dev and mlem.ai. It must be due to recent upgrades on packages including react to version 18. I hope, this must be relatively easier to debug with DEV_SSR available.

[rogermparent]

Sentry's reporting issues on cml.dev home, mlem.ai home, https://mlem.ai/doc/contributing/core. I can only recreate in prod on the contributing/core page and not the homepage.

[rogermparent]

Seems like the ones on contributing/core are related to the redirect pre-replacement being run on our docs links. There's another error as well after taking care of that related to aria-current="page".

The first error was

Warning: Prop `href` did not match. Server: "/doc/user-guide/remote-projects" Client: "/doc/user-guide/remote-objects"

Replacing remote-projects with remote-objects in sidebar.json stops that error, but after that we get Warning: Extra attributes from the server: aria-current from our link component.

In /doc/api-reference I get

Warning: Prop `className` did not match. Server: "styles-module--sectionLink--kYxQr styles-module--active--22Q07 link-with-focus" Client: "styles-module--sectionLink--kYxQr styles-module--active--22Q07 docSearch-lvl0 link-with-focus"

[yathomasi]

In /doc/api-reference I get

Warning: Prop `className` did not match. Server: "styles-module--sectionLink--kYxQr styles-module--active--22Q07 link-with-focus" Client: "styles-module--sectionLink--kYxQr styles-module--active--22Q07 docSearch-lvl0 link-with-focus"

It seems like we have more of this kind of error, for example, if we scroll so that the alert bar is hidden we get a similar className mismatch error. I think it's quite a common approach to remove/add the classname for interaction. If it started catching them, I think there will be a lot more of such kinds of errors.

I have created a draft PR: https://github.com/iterative/mlem.ai/pull/148 to get started with fixing. It's okay if you pick up from there or we can close it if you are already working on a branch.

[rogermparent]

I can only replicate the header alert hydration error in the dev server with DEV_SSR, both prod and serve && build don't have the issue for me.

https://user-images.githubusercontent.com/9111807/182651256-9476cc7f-84c5-4e2f-bd45-b1d204d77a43.mp4

It looks like the lack of the hydration issue is because they don't attempt to persist the page's scroll position on refresh, which seems like it's actually a whole other issue with how our site's configured because gatsbyjs.com persists the scroll point in prod just fine, even with a header banner like ours!

Still, https://github.com/iterative/gatsby-theme-iterative/pull/33 is currently reworking that logic so I'll use the DEV_SSR flag there to see if I can make something solid enough that even this won't trip it up. Thanks for the tip @LekoArts!