Closed
Description
What version of Remix are you using?
the main branch of remix (hash a759aff)
Steps to Reproduce
Install the Dark Reader Chrome Extension: https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=en-US
- Checkout the remix repo (this repo.)
- Run
yarn playground:new - After finishing, run
yarn devin the newly created playground folder,yarn watchin the root of remix
Expected Behavior
should see Remix Playground, Sign up / Log In buttons with Dark Reader able to run
Actual Behavior
The playground loads for a sec, then when React does hydrateRoot, it fails to load if the Dark Reader Chrome Extension is enabled.
The workaround is to don't use any chrome extensions that modify the DOM in order to run the playground.
react-dom.development.js:86 Warning: Expected server HTML to contain a matching <meta> in <head>.
at meta
at Meta (http://localhost:3000/build/_shared/chunk-EYMZ6H3Z.js:2816:7)
at head
at html
at App
at RemixRoute (http://localhost:3000/build/_shared/chunk-EYMZ6H3Z.js:2586:3)
at Routes2 (http://localhost:3000/build/_shared/chunk-EYMZ6H3Z.js:2569:7)
at Router (http://localhost:3000/build/_shared/chunk-EYMZ6H3Z.js:679:15)
at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-EYMZ6H3Z.js:1079:10)
at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-EYMZ6H3Z.js:1004:5)
at RemixEntry (http://localhost:3000/build/_shared/chunk-EYMZ6H3Z.js:2466:12)
at RemixBrowser (http://localhost:3000/build/_shared/chunk-EYMZ6H3Z.js:3213:27)
printWarning @ react-dom.development.js:86
5react-dom.development.js:14344 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (react-dom.development.js:14344:9)
at tryToClaimNextHydratableInstance (react-dom.development.js:14372:7)
at updateHostComponent$1 (react-dom.development.js:20636:5)
at beginWork (react-dom.development.js:22373:14)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4157:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:16)
at invokeGuardedCallback (react-dom.development.js:4270:31)
at beginWork$1 (react-dom.development.js:27243:7)
at performUnitOfWork (react-dom.development.js:26392:12)
at workLoopSync (react-dom.development.js:26303:5)
react-dom.development.js:11996 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removeChildFromContainer (http://localhost:3000/build/entry.client-R32SQO3U.js:7970:23)
at unmountHostComponents (http://localhost:3000/build/entry.client-R32SQO3U.js:16770:17)
at commitDeletion (http://localhost:3000/build/entry.client-R32SQO3U.js:16814:13)
at commitMutationEffects_begin (http://localhost:3000/build/entry.client-R32SQO3U.js:16958:19)
at commitMutationEffects (http://localhost:3000/build/entry.client-R32SQO3U.js:16946:11)
at commitRootImpl (http://localhost:3000/build/entry.client-R32SQO3U.js:18515:13)
at commitRoot (http://localhost:3000/build/entry.client-R32SQO3U.js:18446:13)
at performSyncWorkOnRoot (http://localhost:3000/build/entry.client-R32SQO3U.js:18067:11)
at flushSyncCallbacks (http://localhost:3000/build/entry.client-R32SQO3U.js:8615:30)
at commitRootImpl (http://localhost:3000/build/entry.client-R32SQO3U.js:18590:11)
Activity