Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[Bug Report] React 18 errors when Dark Reader is enabled
See original GitHub issueBroken Website Report
Website Address
https://stampy-ui-react-18.aprillion.workers.dev/
I “fixed” my actual site in https://github.com/Aprillion/stampy-ui/commit/c1753cf4a4f1980b24b8ea62dcc5ca39f3072418 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 https://github.com/facebook/react/issues/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.)
Issue Analytics
- State:
- Created a year ago
- Reactions:2
- Comments:7 (1 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
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.
I see this issue on mac os 13.0.1, chrome 107.0.5304.121, remix 1.8.0