[Bug Report] React 18 errors when Dark Reader is enabled

[Aprillion]

Broken Website Report

Website Address

https://stampy-ui-react-18.aprillion.workers.dev/

I "fixed" my actual site in StampyAI/stampy-ui@c1753cf by reverting from React 18 to React 17,,, but there were a few days while https://stampy-ui.aprillion.workers.dev/ didn't work for users of this plugin and it was very hard to debug why.

Steps To Reproduce

See facebook/react#24430

I believe this plugin inserts <meta> tag and not <script>, but the error would be the same - a new version of React doesn't expect that any browser plugin would try to insert new HTML elements before the client-side code executes. (and the client-side code executes asynchronously after downloading the full server-side stream of HTML and all of the needed JS to hydrate the page)

Problematic Observation

Completely blank (black) page for the users of this plugin - developers of the web pages wouldn't be able to discover the issue if not using this plugin.

Screenshots

System Information

Confirmed on Win 10, Chrome 106, Dark Reader 4.9.58.

Note: works fine on MacOS 12.6 in the same version of chrome and dark reader, only reproducible on Windows (not tested on any Linux).

Additional Context

Many developers will upgrade to React 18 and if they use Next.js or Remix or other SSR framework, many web pages will stop working for users of this plugin without the knowledge of the developers of those web sites...

If there is anything that authors of this plugin can do to improve experience of your users before this gets fixed on the React side (and published and installed by web developers), please do. (Even if nothing can be done by this browser extension, leaving this issue open might improve searchability / deduplication of future issues.)

[Gusted]

Interesting behavior from React. But to fix this we will need to disable some core parts of Dark Reader that currently exists to avoid certain bugs. This sounds like a case that React's needs to fix on their part. If Dark Reader wants to workaround this issue, it will break other sites/behavior, which isn't a good trade-off. I will leave this issue open for now.

[vivekascoder]

Faced a similar issue with dark reader and nextjs 12.2.5

[divmgl]

Can confirm that this is still happening with Dark Reader and only affects SSR apps that are using React 18 and hydrateRoot. This is not happening in React 17:

For now I've had to switch my Remix app back to using hydrate rather than hydrateRoot:

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

hydrate(<RemixBrowser />, document);

[icyJoseph]

How do you guys reproduce this? I've tried a bit with Next 12.3.x and React 18.2.x, but nothing.

[Aprillion]

Hm, looks like this bug is OS dependent ... the original repro url works for me on MacOS 12.6
However it's still a blank page on Window 10.0.19043

Dark Reader 4.9.58, Chrome 106.0.5249.119 in both cases.

[icyJoseph]

I see, I have MacOS here, I'll give it a go on my other machines later today.

[SagnikPradhan]

I see this issue on mac os 13.0.1, chrome 107.0.5304.121, remix 1.8.0