React 18 : Hydration failed because the initial UI does not match what was rendered on the server. #2570

rphlmr · 2022-03-31T17:11:43Z

What version of Remix are you using?

1.3.4

Steps to Reproduce

Update https://github.com/remix-run/indie-stack/tree/main

react: 18.0.0
react-dom: 18.0.0

Update entry.client.tsx :

import { hydrateRoot } from "react-dom/client";
import { RemixBrowser } from "remix";

hydrateRoot(document, <RemixBrowser />);

Run dev with NODE_ENV=production

Expected Behavior

No error

Actual Behavior

White screen with errors :

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (:3000/build/entry.client-K3EESZRH.js:10325:17)
    at tryToClaimNextHydratableInstance (:3000/build/entry.client-K3EESZRH.js:10335:15)
    at updateHostComponent$1 (:3000/build/entry.client-K3EESZRH.js:14601:13)
    at beginWork (:3000/build/entry.client-K3EESZRH.js:15679:22)
    at HTMLUnknownElement.callCallback2 (:3000/build/entry.client-K3EESZRH.js:3453:22)
    at Object.invokeGuardedCallbackDev (:3000/build/entry.client-K3EESZRH.js:3478:24)
    at invokeGuardedCallback (:3000/build/entry.client-K3EESZRH.js:3512:39)
    at beginWork$1 (:3000/build/entry.client-K3EESZRH.js:18903:15)
    at performUnitOfWork (:3000/build/entry.client-K3EESZRH.js:18367:20)
    at workLoopSync (:3000/build/entry.client-K3EESZRH.js:18307:13)

Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at appendChildToContainer (http:https://192.168.1.17:3000/build/entry.client-K3EESZRH.js:7946:24)
    at insertOrAppendPlacementNodeIntoContainer (http:https://192.168.1.17:3000/build/entry.client-K3EESZRH.js:16695:15)
    at insertOrAppendPlacementNodeIntoContainer (http:https://192.168.1.17:3000/build/entry.client-K3EESZRH.js:16702:15)
    at insertOrAppendPlacementNodeIntoContainer (http:https://192.168.1.17:3000/build/entry.client-K3EESZRH.js:16702:15)
    at insertOrAppendPlacementNodeIntoContainer (http:https://192.168.1.17:3000/build/entry.client-K3EESZRH.js:16702:15)
    at insertOrAppendPlacementNodeIntoContainer (http:https://192.168.1.17:3000/build/entry.client-K3EESZRH.js:16702:15)
    at insertOrAppendPlacementNodeIntoContainer (http:https://192.168.1.17:3000/build/entry.client-K3EESZRH.js:16702:15)
    at insertOrAppendPlacementNodeIntoContainer (http:https://192.168.1.17:3000/build/entry.client-K3EESZRH.js:16702:15)
    at insertOrAppendPlacementNodeIntoContainer (http:https://192.168.1.17:3000/build/entry.client-K3EESZRH.js:16702:15)
    at insertOrAppendPlacementNodeIntoContainer (http:https://192.168.1.17:3000/build/entry.client-K3EESZRH.js:16702:15)```

The text was updated successfully, but these errors were encountered:

rphlmr · 2022-03-31T17:14:15Z

No error when NODE_ENV=development

rphlmr · 2022-03-31T17:33:55Z

🤷‍♂️ sorry can't reproduce. I close (maybe a caching issue ?)

DAlperin · 2022-04-01T19:00:46Z

@rphlmr Could we re-open this? Multiple people have faced this issue in the discord. I think the problem lies in upgrading an existing app but I have no idea why that would cause problems.
I am fairly confident caching isn't the issue. The problem persists across multiple browsers and private browsing .

rphlmr · 2022-04-01T19:03:11Z

@DAlperin Yes I can ;)
I reproduce if I npm run dev after a cypress run.
But if i clean build folder and re run dev, no more problems 🤷‍♂️

DAlperin · 2022-04-01T19:10:04Z

@rphlmr I just tried rm -rf tmp .cache build && npm run dev and the problem persists. Any ideas?

Also I am not using cypress, so the problem must be related but different

rphlmr · 2022-04-01T21:31:37Z

@DAlperin I have a demo here but It works
I think I follow the react migration guide to adapt this.

If it can help, i'm on macos with node v16.14.2

DAlperin · 2022-04-02T20:38:38Z

@rphlmr I published my code to a branch of my repo. If you get the chance, do you think you could look it over or try running it?
https://github.com/DAlperin/dov.dev-remix/tree/react-18-broken

rphlmr · 2022-04-04T08:10:32Z

@DAlperin It works (react-18-broken) on my machine ^^"

DAlperin · 2022-04-04T15:55:00Z

@rphlmr figured it out! remix-themes seemed to be playing weirdly with the new hydration in some edge cases. (I think the useTheme hook was returning conflicted values on the client and the server). I'll open up a issue over there to track. Thank you for your help!

Schular · 2022-04-06T07:58:34Z

In my case Apollo Client Devtools was causing the app to crash after upgrade to React v18, because it was injecting a script tag on client side.

Who have this problem could try running in incognito mode in order to exclude browser extensions.

ostwilkens · 2022-04-10T22:25:42Z

"Dark Reader" extension also triggers this error. Of course, disabling extensions isn't a solution. I can't ask visitors to disable all extensions to view my site.
@MichaelDeBoey could you reopen this issue?

hrgui · 2022-04-14T18:46:19Z

Something that I've been wondering about:

hydrateRoot(document, <RemixBrowser />);

I don't think it's a good idea to hydrate the entire document because for chrome extensions that modify the DOM (e.g. Apollo Client DevTools, LastPass, Dark Reader), they will add / change the DOM significantly by injecting CSS / JS.

danestves · 2022-04-14T22:48:59Z

I have the same problem with cypress ended up doing this workaround

// Dependencies
import { RemixBrowser } from "@remix-run/react";
import { hydrateRoot } from "react-dom/client";

if (process.env.NODE_ENV === "test") {
  require("react-dom").hydrate(<RemixBrowser />, document);
} else {
  hydrateRoot(document, <RemixBrowser />);
}

CanRau · 2022-04-21T23:05:13Z

Happened to me due to Yoroi
And agree with @ostwilkens expecting user (and developers) to disable browser extensions is not a solution

@hrgui yea, though I love that Remix gives us the full control, maybe hydrating document.head & document.body instead might help? Well Yoroi is injecting before <head> not sure what others do, if they inject into <head> oder <body> same issue would happen I guess? 🤔

hrgui · 2022-04-22T04:09:01Z

@CanRau if we do hydrate document.body instead, we need to change how entry.server works, otherwise there will be a mismatch - because entry.server renders the entire document.

CanRau · 2022-04-22T04:27:07Z

Yeah I imagined it wouldn't be thaat simple, just a quick thought^^

hrgui · 2022-04-23T04:46:39Z

With a non-remix app, I was able to get it to work after observing what next.js and hydrogen does in regards to streaming:

They both have a div element they are hydrating.

hrgui/nodejs-react-sc-demo@ac87234

The server renders the entire document with a <div id="root"></div> wrapping the react app.
The client only hydrates the the #root element, and renders <App />

I tried replicating the same in remix, but an issue arises - both <RemixServer /> and <RemixBrowser /> return the entire document. <RemixBrowser /> just needs to render the portion that has to be hydrated.

DAlperin · 2022-04-24T00:16:53Z

@rphlmr I think this issue should be reopened. I deployed my first production remix app and have gotten consistent reports from users who have any extension that mutated the DOM (many many of them) I'm going to revert to react 17 tomorrow, but this issue should be considered 'breaking'.

If you'd prefer, I can open another issue.

Tracking in: remix-run/remix#2570 remix-run/remix#2947

machour · 2022-04-24T10:26:38Z

@DAlperin you can comment on this new issue: #2947
Clearly, asking users to disable their extension can't be the solution.

jacob-ebey · 2022-04-25T21:17:27Z

Cross linking this facebook/react#22833

rphlmr · 2022-04-25T21:38:35Z

@rphlmr I think this issue should be reopened. I deployed my first production remix app and have gotten consistent reports from users who have any extension that mutated the DOM (many many of them) I'm going to revert to react 17 tomorrow, but this issue should be considered 'breaking'.

If you'd prefer, I can open another issue.

Sorry I'm unable to do that :/ (no reopen option)

edwinvrgs · 2022-05-06T15:35:42Z

I have the same problem with cypress ended up doing this workaround

// Dependencies
import { RemixBrowser } from "@remix-run/react";
import { hydrateRoot } from "react-dom/client";

if (process.env.NODE_ENV === "test") {
  require("react-dom").hydrate(<RemixBrowser />, document);
} else {
  hydrateRoot(document, <RemixBrowser />);
}

This worked for me!

alirezabonab · 2022-06-06T07:42:24Z

Any update here?

machour · 2022-06-06T08:35:04Z

@alireza-bonab This issue is closed, #2947

tanduong · 2022-07-16T05:42:17Z

This issue still happens with react 18.2.0 as I init the project with the indie stack.

dan-cooke · 2022-08-21T11:37:40Z

I just went back to using hydrate from react-dom instead of the new hydrateRoot, the fix suggested by @danestves for cypress, only works if you are running cypress locally.

For running it against deployed staging environments etc, it will not work.

Awaiting a fix in the meantime

jgentes · 2022-09-25T17:00:00Z

Taking the lead from @dan-cooke this seems to work nicely (using React 18.2.0 with @emotion and not disabling browser plugins):

import { RemixBrowser } from '@remix-run/react'
import { hydrate } from 'react-dom'

hydrate(<RemixBrowser />, document)

simmondsty · 2022-09-27T06:31:07Z

This issue remains.

import { hydrate } from 'react-dom'

Is working for now but not ideal since it only allows you to make use of react v17 features.

rphlmr · 2022-09-27T07:20:52Z

I have a Remix stack following indie stack and my cypress runs fine (when it's not timed out 🤭) on GitHub action.

I just have to add this, somewhere in cypress/support :

(source)

Cypress.on("uncaught:exception", (err) => {
  // Cypress and React Hydrating the document don't get along
  // for some unknown reason. Hopefully, we figure out why eventually
  // so we can remove this.
  if (
    /hydrat/i.test(err.message) ||
    /Minified React error #418/.test(err.message) ||
    /Minified React error #423/.test(err.message)
  ) {
    return false;
  }
});

But, even with entry files like the indie stack, you'll still have an error in the console in prod (not breaking things but disgracious)

diboune · 2022-10-17T11:26:25Z

any news on this? other than using the React 17 hydrate

machour · 2022-10-17T13:21:14Z

@diboune As you can see, this issue is closed... please open a new issue if you're facing a problem.

rphlmr added the bug:unverified label Mar 31, 2022

rphlmr mentioned this issue Mar 31, 2022

fix: entry.client not using the new hydrateRoot remix-run/indie-stack#41

Merged

rphlmr mentioned this issue Mar 31, 2022

wip: react 18. Crash in cypress rphlmr/supa-fly-stack#3

Closed

rphlmr closed this as completed Mar 31, 2022

rphlmr reopened this Apr 1, 2022

MichaelDeBoey closed this as completed Apr 7, 2022

CanRau mentioned this issue Apr 22, 2022

feat: updated to use React 18 streaming netlify/remix-template#12

Merged

DAlperin added a commit to DAlperin/dov.dev-remix that referenced this issue Apr 24, 2022

Revert to react 17 for now.

89fa4fe

Tracking in: remix-run/remix#2570 remix-run/remix#2947

airjp73 mentioned this issue May 11, 2022

[Bug]: React 18 - hydrateRoot + StrictMode breaks with invariant error airjp73/remix-validated-form#109

Closed

4 tasks

tshddx mentioned this issue Sep 12, 2022

Interaction between Remix, Lastpass, and <link rel=stylesheet> and (possibly) @import #4175

Closed

ntorba mentioned this issue Sep 26, 2022

Weird Hydration Issue rooteco/tweetscape-streams#21

Closed

remix-run locked as resolved and limited conversation to collaborators Oct 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React 18 : Hydration failed because the initial UI does not match what was rendered on the server. #2570

React 18 : Hydration failed because the initial UI does not match what was rendered on the server. #2570

rphlmr commented Mar 31, 2022 •

edited

Loading

rphlmr commented Mar 31, 2022

rphlmr commented Mar 31, 2022

DAlperin commented Apr 1, 2022

rphlmr commented Apr 1, 2022 •

edited

Loading

DAlperin commented Apr 1, 2022 •

edited

Loading

rphlmr commented Apr 1, 2022

DAlperin commented Apr 2, 2022

rphlmr commented Apr 4, 2022 •

edited

Loading

DAlperin commented Apr 4, 2022

Schular commented Apr 6, 2022

ostwilkens commented Apr 10, 2022

hrgui commented Apr 14, 2022

danestves commented Apr 14, 2022

CanRau commented Apr 21, 2022

hrgui commented Apr 22, 2022

CanRau commented Apr 22, 2022

hrgui commented Apr 23, 2022

DAlperin commented Apr 24, 2022

machour commented Apr 24, 2022

jacob-ebey commented Apr 25, 2022

rphlmr commented Apr 25, 2022

edwinvrgs commented May 6, 2022

alirezabonab commented Jun 6, 2022

machour commented Jun 6, 2022

tanduong commented Jul 16, 2022

dan-cooke commented Aug 21, 2022 •

edited

Loading

jgentes commented Sep 25, 2022 •

edited

Loading

simmondsty commented Sep 27, 2022

rphlmr commented Sep 27, 2022 •

edited

Loading

diboune commented Oct 17, 2022

machour commented Oct 17, 2022

React 18 : Hydration failed because the initial UI does not match what was rendered on the server. #2570

React 18 : Hydration failed because the initial UI does not match what was rendered on the server. #2570

Comments

rphlmr commented Mar 31, 2022 • edited Loading

What version of Remix are you using?

Steps to Reproduce

Expected Behavior

Actual Behavior

rphlmr commented Mar 31, 2022

rphlmr commented Mar 31, 2022

DAlperin commented Apr 1, 2022

rphlmr commented Apr 1, 2022 • edited Loading

DAlperin commented Apr 1, 2022 • edited Loading

rphlmr commented Apr 1, 2022

DAlperin commented Apr 2, 2022

rphlmr commented Apr 4, 2022 • edited Loading

DAlperin commented Apr 4, 2022

Schular commented Apr 6, 2022

ostwilkens commented Apr 10, 2022

hrgui commented Apr 14, 2022

danestves commented Apr 14, 2022

CanRau commented Apr 21, 2022

hrgui commented Apr 22, 2022

CanRau commented Apr 22, 2022

hrgui commented Apr 23, 2022

DAlperin commented Apr 24, 2022

machour commented Apr 24, 2022

jacob-ebey commented Apr 25, 2022

rphlmr commented Apr 25, 2022

edwinvrgs commented May 6, 2022

alirezabonab commented Jun 6, 2022

machour commented Jun 6, 2022

tanduong commented Jul 16, 2022

dan-cooke commented Aug 21, 2022 • edited Loading

jgentes commented Sep 25, 2022 • edited Loading

simmondsty commented Sep 27, 2022

rphlmr commented Sep 27, 2022 • edited Loading

diboune commented Oct 17, 2022

machour commented Oct 17, 2022

rphlmr commented Mar 31, 2022 •

edited

Loading

rphlmr commented Apr 1, 2022 •

edited

Loading

DAlperin commented Apr 1, 2022 •

edited

Loading

rphlmr commented Apr 4, 2022 •

edited

Loading

dan-cooke commented Aug 21, 2022 •

edited

Loading

jgentes commented Sep 25, 2022 •

edited

Loading

rphlmr commented Sep 27, 2022 •

edited

Loading