v3 site has hydration issues on Ubuntu

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:

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.

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.

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?

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

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)

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.

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?

@slorber

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 react/react#26224

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.

I've raised a mini PR to add the errorInfo paramater to what is logged here: #9387

Did you see my comments on #9447 ? I'm happy to help you get Docusaurus running on Azure Static Web Apps and plug in Lighthouse there.

Damn, I spent the day on this to figure out the problem is not Ubuntu but mobile viewport.

If you hydrate a page on small device (like Lighthouse does) you get the error.

This should be fixed now: https://deploy-preview-9446--docusaurus-2.netlify.app/

Good work on the mobile viewport stuff! I'll test on my home machine when I get a moment. The one thing that's in the back of my mind is that I have seen this on Ubuntu in desktop view - will let you know what I find

It might be good to run lighthouse in desktop and mobile view regardless. There's tips here on how to do it

treosh/lighthouse-ci-action#79 (comment)

Thanks, I'm not satisfied with our current setup, noted to also test on desktop here: #9449

Good catch and thanks for the big effort 💪

@slorber

I still see the error on the mobile view @slorber - is the change live? Browsing at https://docusaurus.io/ and I've done a hard refresh

Not live yet, deploy failed like often due to our weird i18n setup

If it's ok in the deploy preview it should be soon in prod

@slorber

@slorber hello, I just updated Centrifugo doc site to Docusaurus v3 and getting similar console errors in production build. I am using v3.0.0 - here is a branch with update, centrifugal/centrifugal.dev#45 (has screenshot with errors I observed). Looking at discussion it seems to be fixed in v3.0.0 - but still sth causes all these errors.

For now I rolled back to using v2.

@FZambia

@FZambia those errors are likely due to your own site code.

Remove your React code, third party plugins, and if error persist then it's our fault, but I doubt it it.

Or you can provide a minimal repro.

Those errors are not a big deal. With React 18 we only log them while they were there but kind of hidden before in v2. It's likely that your v2 site already has hydration issues, that are simply unreported

Remove your React code, third party plugins, and if error persist then it's our fault, but I doubt it it.

This advice helped me, thanks! In my case this was due to the following plugin in docusaurus.config.js:

  plugins: [
    [
      require.resolve("@easyops-cn/docusaurus-search-local"),
      {
        hashed: true,
      },
    ],

Removing it fixed all the errors.

I was facing this issue serving static build with Caddy.

My issue was that I was always serving index.html which wouldn't match what React would render for each other page on the client, obviously!

Just writing this to give a tip on how to debug this:

Get the html from what's being rendered (DOM)
Get the source served
Format both with any formatter and do a diff using any diffing tool to see what's different.
That diff should give you good hints on where your issues come from.

Maybe this obvious for some, but might be a good hint for others 🍻

My issue was that I was always serving index.html

That's a common issue with hosts that do not serve static deployments correctly by default.

You can also use devtools to throttle the network (or even block JS execution) and see that it first renders your homepage, and then it gets "fixed" by the local JS.

Navigation Menu

v3 site has hydration issues on Ubuntu #9379

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

Steps to reproduce

Expected behavior

Actual behavior

Your environment

Self-service

29 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

v3 site has hydration issues on Ubuntu #9379

Description

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

Steps to reproduce

Expected behavior

Actual behavior

Your environment

Self-service

Activity

slorber commented on Oct 8, 2023

johnnyreilly commented on Oct 8, 2023

johnnyreilly commented on Oct 8, 2023

johnnyreilly commented on Oct 8, 2023

slorber commented on Oct 9, 2023

johnnyreilly commented on Oct 9, 2023

johnnyreilly commented on Oct 9, 2023

johnnyreilly commented on Oct 9, 2023

johnnyreilly commented on Oct 9, 2023

29 remaining items

johnnyreilly commented on Oct 25, 2023

slorber commented on Oct 25, 2023

johnnyreilly commented on Oct 25, 2023

johnnyreilly commented on Oct 25, 2023

slorber commented on Oct 25, 2023

lebalz commented on Oct 25, 2023

johnnyreilly commented on Oct 25, 2023

slorber commented on Oct 26, 2023

FZambia commented on Nov 4, 2023

slorber commented on Nov 6, 2023

FZambia commented on Dec 31, 2023

ismaelga commented on Mar 5, 2024

slorber commented on Mar 5, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions