v3 site has hydration issues on Ubuntu

[johnnyreilly]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

MIgrating my blog over to docusaurus v3 I noticed "Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings." in the console.

Translated, this error means: Hydration failed because the initial UI does not match what was rendered on the server.

You can see it on the Docusaurus site as well as on my own.

You can see a repro of the error at either of the URLs below; simply pop open the devtools console and navigate there:

• https://thankful-sky-0bfc7e803-712.westeurope.1.azurestaticapps.net/azure-open-ai-generate-article-metadata-with-typescript
• https://docusaurus.io/blog/preparing-your-site-for-docusaurus-v3

Steps to reproduce

See description

Expected behavior

No errors in console

Actual behavior

Errors in console

The same error appears present on the docusaurus site itself:

I run lighthouse in github actions on my blog - it shows up there too:

https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1696186829813-4063.report.html

Your environment

• Public source code: chore: upgrade to docusaurus 3 johnnyreilly/blog.johnnyreilly.com#712
• Public site URL: johnnyreilly.com
• Docusaurus version used: 3.0.0-beta.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version - for my machine Ubuntu 22 LTS. For LightHouse / GitHub Actions Ubuntu also

Self-service

• I'd be willing to fix this bug myself.

[slorber]

I don't see any of those hydration errors on my side

Tried on Chrome, Firefox, Safari, no issue found.

Maybe it's related to a local browser extension or something on your computer? I'm surprised Lighthouse reports it though.

[johnnyreilly]

Lighthouse isn't running on my machine - it's on GitHub actions. So it's not a "my machine" only issue. It was actually the lighthouse report that I first noticed - then I thought I'd have a look on my own machine and found it there too.

I run Ubuntu locally - but I assume the OS isn't necessarily relevant?

[johnnyreilly]

BTW when testing, are you opening devtools before navigating? I didn't see them locally until I opened devtools prior to entering the URL in the browser. Also, it only seems to be the blog section that's affected

[johnnyreilly]

Interesting - cracked open my work computer (Mac OS) and there's no issue there:

Also I took a look at the Lighthouse GitHub Action; it runs on Ubuntu also: https://github.com/treosh/lighthouse-ci-action/blob/7f5e1fde07d17cbb1c47873c81441f53c0f72fcf/.github/workflows/main.yml#L5

It looks like this might be an Ubuntu / Linux specific issue. (I haven't tested on Windows - don't know if it surfaces there as well)

[slorber]

I don't know but that seems hard to reproduce currently 😅

If you are able to reproduce it locally, that would be interesting to compare the DOM html you get with/without JS, and see how they differ.

I have been careful to fix all the hydrations issues we had for v3. Those issues existed before in v2 (but silently ignored). They are now logged to the console due to a new React 18 onRecoverableError callback.

[johnnyreilly]

I can reproduce locally super easily on my home Ubuntu machine. My guess is any Ubuntu machine would do the job.

So you'd like the originally served HTML and what the DOM html looks like after it starts?

Is there a best way to surface the DOM html? Devtools and copy outerhtml?

[johnnyreilly]

As a first test, I tried comparing the supposedly working hydration on my Mac (no errors) and found that non-hydrated and hydrated already look pretty different. But that's appears to be fine.

How did you manage to fix the existing hydration issues @slorber? Doesn't look like there's much to go on looking at facebook/react#26224

[johnnyreilly]

By the looks of it, there's 2 parameters sent to onRecoverableError:

https://github.com/facebook/react/blob/dddfe688206dafa5646550d351eb9a8e9c53654a/packages/react-reconciler/src/ReactInternalTypes.js#L270-L273

  onRecoverableError: (
    error: mixed,
    errorInfo: {digest?: ?string, componentStack?: ?string},
  ) => void,

I wonder if we could expose that extra information here:

docusaurus/packages/docusaurus/src/client/clientEntry.tsx

Lines 40 to 42 in 35441b3

	const onRecoverableError = (error: unknown): void => {
	console.error('Docusaurus React Root onRecoverableError:', error);
	};

So we've got more to go on? The error itself doesn't provide any information about where the issue comes from.

Essentially I'm wondering if we can console.log 2 parameters instead of 1.