remix: [React 18] hydrateRoot(document, ) causes app crash with any scripts that modified DOM before hydration

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 reverted to react 17, but this issue should be considered ‘breaking’.

We should probably retitle this issue to reflect that it’s not just dark reader, but any extension that injects script tags or mutates the DOM.

If you upgrade to https://www.npmjs.com/package/react/v/18.2.0-next-a412d787e-20220518 you can do the following:

In your entry.client.tsx file

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

hydrateRoot(document, <RemixBrowser />);

In your entry.server.tsx file

import { PassThrough } from "stream";
import { renderToPipeableStream } from "react-dom/server";
import { RemixServer } from "@remix-run/react";
import { Response } from "@remix-run/node";
import type { EntryContext, Headers } from "@remix-run/node";
import isbot from "isbot";

const ABORT_DELAY = 5000;

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const callbackName = isbot(request.headers.get("user-agent"))
    ? "onAllReady"
    : "onShellReady";

  return new Promise((resolve, reject) => {
    let didError = false;

    const { pipe, abort } = renderToPipeableStream(
      <RemixServer context={remixContext} url={request.url} />,
      {
        [callbackName]() {
          let body = new PassThrough();

          responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(body, {
              status: didError ? 500 : responseStatusCode,
              headers: responseHeaders,
            })
          );
          pipe(body);
        },
        onShellError(err: unknown) {
          reject(err);
        },
        onError(error: unknown) {
          didError = true;
          console.error(error);
        },
      }
    );
    setTimeout(abort, ABORT_DELAY);
  });
}

And you should be streaming from the server again on the initial render.

This is just a short-term hack; I pulled this from Kent Dodds’s upcoming Front End Masters course, seems like an awesome one!

I would like to bump this issue, we have upgraded our stack to the latest version of react (18.2.0), we modified entry.server (https://github.com/remix-run/indie-stack/blob/main/app/entry.server.tsx) and entry.client (https://github.com/remix-run/indie-stack/blob/main/app/entry.client.tsx) inline with the latest version of the indie stack.

After deploying to production, we are finding errors:

If you would like to see a reproduction of the issue, please see here: https://pr-30-osc-academic-hub.fly.dev/

Obviously this diverges slightly from the original issue, as this screenshot demonstrates the error in incognito mode with no extensions installed.

edit -> after doing some further investigation, we have pinpointed one of the extensions causing the issue (loom, screen recorder)

Sounds good @dr3, I have closed this issue as completed.

The original problem of an application crash has been fixed in React 18.2.0.

Users that have chrome extensions that do inject into the DOM will encounter a client-side re-render warning. In Cypress it will be treated as an error since React uses error for that. Follow https://github.com/facebook/react/issues/24430.

I believe the only remaining action the Remix team could possibly do is not hydrate the entire document in order to fix the problem. Otherwise, we are waiting on https://github.com/facebook/react/issues/24430.

That’s because without <Scripts/> you’re site is completely static, no JavaScript, no hydration and therefore no client hydration, so no hydration errors

I realice that the issue comes from the <Scripts /> component. But still I’m not sure why.

Note:

Upgrading react-dom/react to v18 and changing hydrate to hydrateRoot is also affected by this bug. I’ve provided a test repo to use: https://github.com/hrgui/react-18-remix-app

When doing the following changes:

package.json:

- "react": "^17.0.2",    
+ "react": "^18.0.0",
- "react-dom": "^17.0.2",    
+ "react-dom": "^18.0.0"

entry.client.jsx:

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

- hydrate(<RemixBrowser />, document);
+ hydrateRoot(document, <RemixBrowser />);

I got reports that my remix site stopped working after update to React 18 from users with browser plugins which add <meta> or <script> tags, e.g.:

Dark Reader: https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh => reported in https://github.com/darkreader/darkreader/issues/8842

Express VPN: https://chrome.google.com/webstore/detail/expressvpn-vpn-proxy-for/fgddmllnllkalaagkghckoinaemmogpe => no idea why VPN would be a browser plugin, I don’t care enough to report to them

Does anyone know of a better workaround than reverting to React 17 until this issue is solved by either React or Remix team?

@aaacafe786 It appears the

Warning: Did not expect server HTML to contain a <script> in <html>.

issue is a documented “gotcha” https://remix.run/docs/en/v1/pages/gotchas#browser-extensions-injecting-code

With the solution being “Check out the page in incognito mode, the warning should disappear.” Granted this feels like a very much a non-solution, as the error happens in production, and affects any user who has certain (popular) chrome extensions installed

@hrgui Should this issue be closed now (primary issue was fixed in react 18.2.0), and we can open a new issue to track the “gotcha”?

Does React 18 allow Remix to create multiple roots for different parts of the document? If that were the case, a potential solution could be to have a <head> root and a separate <body> root, which would obviate most browser extension problems AFAIK

Hi, a dev from 2024, who also faced the same issue with Cloudflare Pages template. I tested it in a variety of configurations. Even with all the extensions disabled. As someone pointed out above (/previously closed thread) the core problem is with react@18.2.

After trying a few React builds the following canary build solved the issue. This also worked with plugins like Grammarly, which we know changes the DOM before hydration.

- "react": "^18.2.0",
- "react-dom": "^18.2.0"
+ "react": "19.0.0-canary-33a32441e9-20240418",
+ "react-dom": "19.0.0-canary-33a32441e9-20240418"

I hope this will help out there anyone unstuck and continue to use the awsome features of Remix.

Though, on second thought not being able to hydrate the <head> content would break a lot of things. So I’m not sure that this is the right tradeoff.