Bug: Hydration mismatch error due to plugins generating script tag on top #24430

yongdamsh · 2022-04-24T02:16:30Z

React version: 18.0.0, 18.1.0-next-fc47cb1b6-20220404 (latest version in codesandbox)

Steps To Reproduce

Install a plugin that creates a script tag at the top(ex: Apollo Client Devtools)
Go to the demo in the new SSR suspense guide
Open preview in a new window
UI mismatch error occurs at hydration time

Link to code example: https://codesandbox.io/s/kind-sammet-j56ro?file=/src/App.js

The current behavior

If a script tag is inserted before the head tag due to the user's browser environment such as a plugin, it is judged as a hydration mismatch and the screen is broken.

2022-04-24.11.02.00.mov

The expected behavior

This problem may be a part that each third party needs to solve, but I'm wondering if it's possible to handle an exception in the hydration matching logic of React.

gaearon · 2022-04-24T02:53:26Z

Might be related to (or same as) #22833, but let's keep both open for now

marcusthelin · 2022-04-24T21:01:06Z

Is the hydrateRoot function expecting the whole html document to be exactly what gets rendered by renderToPipeableStream? The best would be to just try to hydrate the React root element where the app is rendered?

It does seem that to use renderToPipeableStream I need to render the whole HTML document with a React component, but this is not ideal when e.g. using Vite with SSR in development, since it needs to transform the html to inject custom scripts.

hrgui · 2022-04-25T04:15:25Z

From my understanding, if anything else other than document was passed in into hydrateRoot, it doesn't seem to crash when I have chrome extensions that modify the DOM installed (e.g. Dark Reader / Apollo DevTools).

Here is the code sandbox: https://codesandbox.io/s/react-18-root-div-hydrateroot-1f5d5q?file=/src/Html.js:193-941

In the above example, I changed the following:

Html.js

export default function Html({ assets, children, title }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="stylesheet" href={assets["main.css"]} />
        <title>{title}</title>
      </head>
      <body>
        <noscript
          dangerouslySetInnerHTML={{
            __html: `<b>Enable JavaScript to run this app.</b>`
          }}
        />
+        <div id="root">{children}</div>
-       {children}
        <script
          dangerouslySetInnerHTML={{
            __html: `assetManifest = ${JSON.stringify(assets)};`
          }}
        />
      </body>
    </html>
  );
}

App.js

export default function App({ assets }) {
  return (
    <Html assets={assets} title="Hello">
+         <AppContent />
-         <Suspense fallback={<Spinner />}>
-            <ErrorBoundary FallbackComponent={Error}>
-                <Content />
-            </ErrorBoundary>
=         </Suspense>
    </Html>
  );
}

+ export function AppContent() {
+  return (
+    <Suspense fallback={<Spinner />}>
+      <ErrorBoundary FallbackComponent={Error}>
+        <Content />
+      </ErrorBoundary>
+    </Suspense>
+  );
+ }

index.js:

- hydrateRoot(document <AppContent />);
+ hydrateRoot(document.getElementById("root"), <AppContent />);

~~I don't know if this crashes with Cypress though.~~ The app doesn't seem to crash under cypress.

Cypress was adding

function $RC(a,b) {...}

to the document. I'd assume it would crash if I hydrated the document.

gaearon · 2022-04-25T12:20:23Z

I don’t think the “stricter” behavior here is intentional. I’ll be checking with the team but my current understanding is that this is a bug.

hrgui · 2022-04-30T02:26:57Z

Something I've noticed is that when React does encounter a hydration mismatch, it attempts to fallback to client side rendering.

Which does show up in the example codesandbox (the one where we are hydrating the document):

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

Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

However, it results in an application crash because of the next error:

 Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

which is from the call stack:
appendChildToContainer <- insertOrAppendPlacementNodeIntoContainer (3) <- commitPlacement <- commitMutationEffectsOnFiber <- commitMutationEffects_complete <- commitMutationEffects_begin <- commitMutationEffects <- commitRootImpl

Then later another error is thrown:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

which is from the call stack:
removeChildFromContainer <- unmountHostComponents <- commitDeletion <- commitMutationEffects_begin <- commitMutationEffects <- commitRootImpl <- commitRoot <- performSyncWorkOnRoot <- flushSyncCallbacks <- commitRootImpl

What I am wondering about is: In the case of falling back to client side rendering, why does React do appendChild instead of replaceChild? If it was replaceChild, there wouldn't be an app crash in this case, but at the cost of needing to fall back to client side rendering.

gaearon · 2022-04-30T13:42:14Z

Yes, that issue is #22833. I believe the fix we wanted to do is changing which top-level element we modify. (Maybe body instead of html?) It would be nice to not have to introduce a separate “host config” method (which we’d have to do if we added a call to “replace”). So ideally the fix should use the methods we already use.

rdadoune · 2022-05-19T21:07:41Z

Not an ideal solution but in my use case, I'm only concerned with generating/modifying the head during SSR, and the following hack allows me to work around errors that occur as the result of modifications to the head outside of React by Cypress, various chrome plugins, etc.

const Head: React.FC = () => {

  if (globalThis.document?.head) {
    return (
      <head dangerouslySetInnerHTML={{ __html: document.head.innerHTML }} />
    );
  }

  return (
    <head>
      {/* ... Do important things on the server */}
    </head>
  );
};

This is especially useful for me because even with current fixes added to react-dom@next that allow the client to "recover", doing so wipes out all styles generated by @emotion that have been collected into the head.

adbutterfield · 2022-06-03T02:06:11Z

I think I have the same error. But mine is from using styled-components. Initially, they put a style tag in the body, but then the style tag gets moved up to the head. You can check this repo here: https://github.com/adbutterfield/fast-refresh-express/tree/react-18

I tried just now using react@next/react-dom@next, but I still get the error.

Of course, it's always possible that I'm doing something stupid in my code...

Mordred · 2022-06-15T14:20:54Z

I tried React 18.2.0, but it still breaks the page when Apollo Client DevTools extension is used. So my ugly solution for this problem is fix the DOM before hydrateRoot:

document.querySelectorAll('html > script').forEach((s) => {
  s.parentNode.removeChild(s);
});

const root = hydrateRoot(
  document,
  <React.StrictMode>
    <AppWithFullDocument />
  </React.StrictMode>,
);

Note: You can replace the selector more strict query .. e.g. 'html > script[src^=chrome-extension]'

(remix-run/remix#2947)

dbashford · 2022-06-21T22:10:21Z

Getting the issue with Cypress tests, as suggested in Remix Discord, my workaround for those coming here:

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

🙏 for a fix soon, thx all!

gaearon · 2022-06-22T00:17:36Z

@dbashford Which in particular issue are you hitting? We’ve released a short-term fix for the most urgent part of the problem in 18.2 (document fallback didn’t work at all). Now it should work by doing a full client render but this will lose the third party things. There is a possible fix to do something smarter but it’s a bigger project and a bit further on the timeline. So it would help to know what exactly broke for you. Is there a repro? Particular scenario? Thanks.

dbashford · 2022-06-22T00:43:20Z

Mine is the Cypress case. Everything works fine in dev and in prod, but Cypress when it kicks up fails (418), and only after making the hydrateRoot switch. I haven't dug into it too far to really understand the problem, but I've read in this thread and in the Remix discord that the problem may be that Cypress monkey's with the head causing the hydration issue. I admit that SSR/hydration are still voodoo/witchcraft to me, so I'm struggling a bit to work my way through it. Baby steps.

CanRau · 2022-06-22T01:14:06Z

Hey @Mordred thanks a lot for this quick hack, I modified it slightly to also get rid of inputs within html as the Yoroi extensions injects a hidden input directly into the <html/> (not <body/>)

document.querySelectorAll("html > script, html > input").forEach((s) => {
  s.parentNode?.removeChild(s);
});

Using this now in my Remix Deno Stack with Streaming 🥳

dbashford · 2022-06-22T13:06:34Z

Nevermind this, was local NODE_ENV issue (cypress issue above is still a problem, though)

~~Also having issues with google analytics writing script tags to the head~~

~~In this case /blog/gtag pulls in the tag manager snippet...~~

~~Google tag manager starts adding scripts to the head, like google-analytics, and things go sideways from there. I've got microsite where this seems to be working, and some where it isn't.~~

gaearon · 2022-06-22T14:09:25Z

@dbashford Can you share a minimal project? It always helps to have concrete examples to check fixes against. This goes for everyone else too.

dbashford · 2022-06-22T18:11:40Z

@gaearon Can call off the dogs on that latest comment, was something I introduced myself while trying to debug a real hydration issue with dates.

The Cypress issue is still a problem, that's all local and consistent. I'll work to get a repro up over the next few weeks when I get a second.

adbutterfield · 2022-06-24T03:58:07Z

I just updated my repo with some instructions to more easily reproduce the issue, and test that it works when not using styled components.

See here: https://github.com/adbutterfield/fast-refresh-express/tree/react-18

camjackson · 2022-06-25T03:24:40Z

Hi @gaearon I have a repro repo for the hydration errors with cypress. It's not exactly "minimal", it's a freshly-created Remix grunge stack app, which has quite a bit of stuff in it. Here it is: https://github.com/camjackson/remix-cypress-error.

Here are the steps to repro the error locally:

git clone git@github.com:camjackson/remix-cypress-error.git
cd remix-cypress-error
yarn
yarn test:e2e:run

The test will fail with a hydration error. To show that it's related to react 18, you can open up app/entry.client.tsx and comment/un-comment a few lines to switch it from hydrateRoot back to the old hydrate. Then run the e2es again and it will pass.

To debug it further, instead of yarn test:e2e:run you can do yarn test:e2e:dev to fire up cypress in interactive mode and see the test fail in a real browser.

Oh and one final note, if you just start the app normally with yarn dev you should see that there are no errors. It only happens with cypress, presumably because cypress injects something extra into the document.

For completeness, here's how I created this repo from scratch:

yarn create remix --template remix-run/grunge-stack
Go through the prompts, give it a name and cd into the newly created project
yarn add react react-dom
yarn add -D @types/react @types/react-dom
Open up app/entry.client.tsx and migrate from react-dom's hydrate to react-dom/client's hydrateRoot

BleedingDev · 2022-06-26T21:17:45Z

I have replicated same behaviour - it can be replicated anywhere with hydrateRoot with any Chrome extension that injects the script. It then switches to client-side rendering.

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

0Lucifer0 · 2022-06-27T07:25:03Z

it's also preventing loom (extension) to work as the extension add a to the dom. Seems like it just break any extension that update the dom and having a workaround every potential extension is going to be a nightmare

fix for loom

document.querySelectorAll('loom-container').forEach((s) => {
    s.parentNode.removeChild(s);
});

additionally this also cause warning if the extension is adding attributes like this one with colorzilla

roggc · 2023-10-07T10:08:56Z

Hey @Mordred thanks a lot for this quick hack, I modified it slightly to also get rid of inputs within html as the Yoroi extensions injects a hidden input directly into the <html/> (not <body/>)
document.querySelectorAll("html > script, html > input").forEach((s) => {
  s.parentNode?.removeChild(s);
});
Using this now in my Remix Deno Stack with Streaming 🥳

What worked for me was:

[...document.querySelectorAll("html>*")]
  .filter((elem) => !elem.matches("head,body"))
  .forEach((s) => {
    s.parentNode?.removeChild(s);
  });

This removes anything added to html from extensions like grammarly. Also add suppressHydrationWarning={true} in the html and body tags in the case of grammarly. I faced this situation in production in an app created with npx create-rsc-app@latest my-app --ssr (it's a setup with RSC and SSR I've made myself).

Mordred · 2023-10-12T06:54:39Z

Today I learned

Not every script tags and style tags comes from browser extensions. Kaspersky Internet Security -> Anti-Banner feature is injecting HTML tags on the network layer (with MiTM, but that is not relevant now :D). This effectively triggers hydration errors.

For now: I'm extending my querySelectorAll to

  document
    .querySelectorAll(
      'html > *:not(body, head), script[src*="extension://"], link[href*="extension://"], script[src*="scr.kaspersky-labs.com"], link[href*="scr.kaspersky-labs.com"]',
    )
    .forEach((s) => {
      s.parentNode.removeChild(s);
    });

If this will not work I swear I will add data-my-tag to every script, link, and style tag which were generated by my server 😂

There is also another problem. React is trying to recover but it replace all HTML elements with new ones. This breaks CSS-in-JS solutions e.g. Emotion, because they already have references to old elements where they are still injecting their styles.

I'm using the MUI library in one of my projects and after the hydration error, all styles are gone.

There is an onRecoverableError but it is called after the DOM was changed by React.

Can we have a callback that will be called before React tries to recover from the hydration mismatch? (@gnoff @gaearon)

I would like to make a snapshot of DOM for better debugging of what people have injected in their browsers. Also Emotion (or another) library can be reset (clear their elements refs) before react switch to client-side rendering (An error occurred during hydration. The server HTML was replaced with client content in <#document>.).

Danones · 2024-01-08T14:22:20Z

Hey everyone 👋🏽

I am currently facing the same issue on my project. I have created the following reproduction repo , in my case I use Remix + Vite + Tailwind.

But the hydration issues have been around long before the Vite integration. It was only with the introduction of Vite, that this was most noticeable because, on Save, and after the HMR kicks in you will see the styles being removed from the DOM.

The following solves my issue:

updating react and react-dom following versions:

    "react": "^18.3.0-next-fccf3a9fb-20230213",
    "react-dom": "^18.3.0-next-fccf3a9fb-20230213",

And this fixes my styling issues despite continuing to get hydration erros in the console.

Disabling all extensions, or even opening a page in incognito mode ( the important stuff here is having all extensions disabled). This also solves the issue but I do not think this is a feasible option.

Knowing now what I know, the root cause might be react related but I still left an issue at vite's repo and I am wondering if remix staff can do something about this in the meantime.

giankotarola · 2024-01-25T16:25:24Z

my hydration error got fixed with:

"react": "^18.3.0-canary-3d9b20132-20240124",
"react-dom": "^18.3.0-canary-3d9b20132-20240124",

For testing i added back the cloudflare email obfuscated script injection + enable back the chrome extensions that triggers the hydration issue for me, Apollo client dev tools / Requestly and have not seen the issue 🙌

rcfrias · 2024-03-01T22:27:31Z

I cant believe this is still a problem for the past 2 years. I have LastPass installed, and even a Hello World app with ONE input tag type "text" and a placeholder "email" is causing the hydration issue. and no, suppressHydrationWarning does not fix the problem. (placed it everywhere without luck) :(

yongdamsh added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Apr 24, 2022

ksavblik mentioned this issue Apr 24, 2022

[React 18] hydrateRoot(document, <RemixBrowser />) causes app crash with any scripts that modified DOM before hydration remix-run/remix#2947

Closed

Aprillion mentioned this issue May 7, 2022

[Bug Report] React 18 errors when Dark Reader is enabled darkreader/darkreader#8842

Open

Aprillion mentioned this issue May 18, 2022

2x Uncaught DOMException Error (Node.appendChild, Node.removeChild) netlify/remix-template#22

Closed

adbutterfield mentioned this issue Jun 2, 2022

React 18 Streaming SSR styled-components/styled-components#3658

Open

gnoff self-assigned this Jun 6, 2022

nickytonline mentioned this issue Jun 14, 2022

feat: add @remix-run/netlify-edge package + update Netlify template remix-run/remix#3104

Closed

2 tasks

benjaminhonorio mentioned this issue Jun 22, 2022

[Feature]: React 18 Support remix-run/remix#577

Closed

robipop22 mentioned this issue Jul 28, 2022

Cypress Tests are failing due to hydration error robipop22/dnb-stack#3

Open

onurtemizkan mentioned this issue Aug 3, 2022

fix(remix): Provide sentry-trace and baggage via root loader. getsentry/sentry-javascript#5509

Merged

isker mentioned this issue Mar 21, 2023

SSR isker/neogrok#2

Closed

Palbahngmiyine mentioned this issue Mar 21, 2023

feat: update twind example remix-run/examples#178

Closed

lili21 mentioned this issue Mar 23, 2023

Remix实战系列 - Streaming SSR如何提升13%的业务指标 lili21/new-blog#26

Closed

CodFrm mentioned this issue Mar 29, 2023

划词翻译会导致用了 react SSR(Server-side rendering) 的网站无法正常运行 hcfyapp/crx-selection-translate#1689

Open

dr3 mentioned this issue Apr 11, 2023

React 18 Global Styles Hydration failures mantinedev/mantine#4047

Closed

Jackardios mentioned this issue Apr 12, 2023

remix.new Stackblitz has hydration errors. remix-run/remix#6026

Closed

1 task

This comment was marked as off-topic.

Sign in to view

ingmarh mentioned this issue May 5, 2023

Bug: Auto-inserted rel=preload script resources are blocked by nonce-CSP #26781

Closed

NevilleS mentioned this issue May 11, 2023

Add infrastructure for consent banner and link ethyca/fides#3191

Merged

14 tasks

vmarta mentioned this issue May 15, 2023

Upgrade to React 18 SalesforceCommerceCloud/pwa-kit#1166

Merged

12 tasks

rdewolff mentioned this issue Jul 11, 2023

When extracting example from repo, getting errors with hydration amannn/next-intl#391

Closed

shuding mentioned this issue Jul 20, 2023

Users who use LastPass can't use Next.JS app router pages with password fields vercel/next.js#51816

Closed

1 task

karlhorky mentioned this issue Jul 21, 2023

Hydration errors in Cypress when using React 18, Next, and server components cypress-io/cypress#27204

Open

This was referenced Aug 4, 2023

create-remix@latest results in hydration errors on unmodified build remix-run/remix#5416

Closed

hydration error when there is a chrome extension that modifies DOM remix-run/remix#4822

Open

balzdur mentioned this issue Dec 1, 2023

feat(chatlio): add chatlio script checkmarble/marble-frontend#287

Merged

Danones mentioned this issue Jan 10, 2024

Vite: Styles lost during HMR mode when using Client Data/SPA Mode remix-run/remix#8466

Closed

hi-ogawa mentioned this issue Jan 16, 2024

refactor: render full document html via React hi-ogawa/ytsub-v3#554

Draft

buugaaga mentioned this issue Feb 8, 2024

React 18 : Hydration failed because the initial UI does not match what was rendered on the server remix-run/remix#8717

Closed

sapphi-red mentioned this issue Feb 11, 2024

Style injection conflicts with SSR hydration on document vitejs/vite#15765

Open

7 tasks

brophdawg11 mentioned this issue Mar 8, 2024

Remix removes injected html from external script remix-run/remix#9016

Closed

Coachonko mentioned this issue Apr 3, 2024

paltform-browser's render function could handle entire document atellmer/dark#44

Closed

rowanc1 mentioned this issue Apr 19, 2024

Flyout: not showing up on hydrated pages readthedocs/addons#278

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug: Hydration mismatch error due to plugins generating script tag on top #24430

Bug: Hydration mismatch error due to plugins generating script tag on top #24430

yongdamsh commented Apr 24, 2022

gaearon commented Apr 24, 2022

marcusthelin commented Apr 24, 2022 •

edited

hrgui commented Apr 25, 2022 •

edited

gaearon commented Apr 25, 2022

hrgui commented Apr 30, 2022 •

edited

gaearon commented Apr 30, 2022 •

edited

rdadoune commented May 19, 2022

adbutterfield commented Jun 3, 2022 •

edited

Mordred commented Jun 15, 2022

dbashford commented Jun 21, 2022

gaearon commented Jun 22, 2022

dbashford commented Jun 22, 2022

CanRau commented Jun 22, 2022 •

edited

dbashford commented Jun 22, 2022 •

edited

gaearon commented Jun 22, 2022

dbashford commented Jun 22, 2022 •

edited

adbutterfield commented Jun 24, 2022

camjackson commented Jun 25, 2022

BleedingDev commented Jun 26, 2022

0Lucifer0 commented Jun 27, 2022 •

edited

This comment was marked as off-topic.

roggc commented Oct 7, 2023

Mordred commented Oct 12, 2023 •

edited

Danones commented Jan 8, 2024 •

edited

giankotarola commented Jan 25, 2024

rcfrias commented Mar 1, 2024

Bug: Hydration mismatch error due to plugins generating script tag on top #24430

Bug: Hydration mismatch error due to plugins generating script tag on top #24430

Comments

yongdamsh commented Apr 24, 2022

Steps To Reproduce

The current behavior

The expected behavior

gaearon commented Apr 24, 2022

marcusthelin commented Apr 24, 2022 • edited

hrgui commented Apr 25, 2022 • edited

gaearon commented Apr 25, 2022

hrgui commented Apr 30, 2022 • edited

gaearon commented Apr 30, 2022 • edited

rdadoune commented May 19, 2022

adbutterfield commented Jun 3, 2022 • edited

Mordred commented Jun 15, 2022

dbashford commented Jun 21, 2022

gaearon commented Jun 22, 2022

dbashford commented Jun 22, 2022

CanRau commented Jun 22, 2022 • edited

dbashford commented Jun 22, 2022 • edited

gaearon commented Jun 22, 2022

dbashford commented Jun 22, 2022 • edited

adbutterfield commented Jun 24, 2022

camjackson commented Jun 25, 2022

BleedingDev commented Jun 26, 2022

0Lucifer0 commented Jun 27, 2022 • edited

This comment was marked as off-topic.

roggc commented Oct 7, 2023

Mordred commented Oct 12, 2023 • edited

Today I learned

Danones commented Jan 8, 2024 • edited

giankotarola commented Jan 25, 2024

rcfrias commented Mar 1, 2024

marcusthelin commented Apr 24, 2022 •

edited

hrgui commented Apr 25, 2022 •

edited

hrgui commented Apr 30, 2022 •

edited

gaearon commented Apr 30, 2022 •

edited

adbutterfield commented Jun 3, 2022 •

edited

CanRau commented Jun 22, 2022 •

edited

dbashford commented Jun 22, 2022 •

edited

dbashford commented Jun 22, 2022 •

edited

0Lucifer0 commented Jun 27, 2022 •

edited

Mordred commented Oct 12, 2023 •

edited

Danones commented Jan 8, 2024 •

edited