Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"Hydration failed ..." in standard vite template application #9050

Closed
John3812 opened this issue Mar 14, 2024 · 4 comments
Closed

"Hydration failed ..." in standard vite template application #9050

John3812 opened this issue Mar 14, 2024 · 4 comments
Labels
bug:unverified hydration

Comments

@John3812
Copy link

Reproduction

# create default app
$ npx create-remix@latest --template remix-run/remix/templates/vite test-rmx
$ cd test-rmx

# run as dev server
$ npm run dev

# run as prod server
$ npm run build
$ npm start

System Info

OS: Linux 6.6.9-amd64 (2024-01-08) x86_64 GNU/Linux
Browser: Brave v1.63.174 Chromium: 122.0.6261.128 (Official Build)  (64-bit)
Node: v18.19.0

package.json: {
  "name": "test-rmx",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/node": "^2.8.1",
    "@remix-run/react": "^2.8.1",
    "@remix-run/serve": "^2.8.1",
    "isbot": "^4.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.8.1",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

Used Package Manager

npm

Expected Behavior

No errors in the browser console

Actual Behavior

  • When running on a vite server ( npm run dev ).
    We have errors in the browser console when opening a page:
react-dom.development.js:86 Warning: Expected server HTML to contain a matching <head> in <html>.
    at head
    at html
    at Layout (http://localhost:5173/app/root.tsx:4:3)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=72fa7274:857:5)
    at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=72fa7274:817:5)
    at DataRoutes (http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=72fa7274:2039:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=72fa7274:1198:15)
    at RouterProvider (http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=72fa7274:1856:5)
    at RemixErrorBoundary (http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=72fa7274:6599:5)
    at RemixBrowser (http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=72fa7274:7437:46)
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnForInsertedHydratedElement @ react-dom.development.js:10499
didNotFindHydratableInstance @ react-dom.development.js:11458
warnNonhydratedInstance @ react-dom.development.js:12385
tryToClaimNextHydratableInstance @ react-dom.development.js:12534
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 16 more frames
Show less
react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less
errorBoundaries.js:71 Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
RemixRootDefaultErrorBoundary @ errorBoundaries.js:71
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 12 more frames
Show less
errorBoundaries.js:71 Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
RemixRootDefaultErrorBoundary @ errorBoundaries.js:71
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20145
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 12 more frames
Show less
react-dom.development.js:86 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
errorHydratingContainer @ react-dom.development.js:11473
recoverFromConcurrentError @ react-dom.development.js:25846
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 8 more frames
Show less
react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 12 more frames
Show less
react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 12 more frames
Show less
react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 12 more frames
Show less
react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 12 more frames
Show less
react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 12 more frames
Show less
react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 12 more frames
Show less
react-dom.development.js:19849 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.
    at updateHostRoot (react-dom.development.js:19849:57)
    at beginWork (react-dom.development.js:21615:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:25750:22)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
updateHostRoot @ react-dom.development.js:19849
beginWork @ react-dom.development.js:21615
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 11 more frames
Show less
  • When running on remix-serve ( npm start ).
    Have errors in the browser console when opening a page:
entry.client-1MMwEDHd.js:20 Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Ai (components-B9PfAFRG.js:28:4788)
    at kc (components-B9PfAFRG.js:30:45300)
    at yc (components-B9PfAFRG.js:30:39531)
    at Yd (components-B9PfAFRG.js:30:39504)
    at hc (components-B9PfAFRG.js:30:34559)
    at k (components-B9PfAFRG.js:15:1561)
    at MessagePort.Ae (components-B9PfAFRG.js:15:1928)
ar @ entry.client-1MMwEDHd.js:20
Do @ components-B9PfAFRG.js:28
kc @ components-B9PfAFRG.js:30
yc @ components-B9PfAFRG.js:30
Yd @ components-B9PfAFRG.js:30
hc @ components-B9PfAFRG.js:30
k @ components-B9PfAFRG.js:15
Ae @ components-B9PfAFRG.js:15
components-B9PfAFRG.js:28 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Ai (components-B9PfAFRG.js:28:4788)
    at kc (components-B9PfAFRG.js:30:45300)
    at yc (components-B9PfAFRG.js:30:39531)
    at Yd (components-B9PfAFRG.js:30:39504)
    at hc (components-B9PfAFRG.js:30:34559)
    at k (components-B9PfAFRG.js:15:1561)
    at MessagePort.Ae (components-B9PfAFRG.js:15:1928)
Ai @ components-B9PfAFRG.js:28
kc @ components-B9PfAFRG.js:30
yc @ components-B9PfAFRG.js:30
Yd @ components-B9PfAFRG.js:30
hc @ components-B9PfAFRG.js:30
k @ components-B9PfAFRG.js:15
Ae @ components-B9PfAFRG.js:15
components-B9PfAFRG.js:28 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Ai (components-B9PfAFRG.js:28:4788)
    at kc (components-B9PfAFRG.js:30:45300)
    at yc (components-B9PfAFRG.js:30:39531)
    at Yd (components-B9PfAFRG.js:30:39504)
    at hc (components-B9PfAFRG.js:30:34559)
    at k (components-B9PfAFRG.js:15:1561)
    at MessagePort.Ae (components-B9PfAFRG.js:15:1928)
Ai @ components-B9PfAFRG.js:28
kc @ components-B9PfAFRG.js:30
yc @ components-B9PfAFRG.js:30
Yd @ components-B9PfAFRG.js:30
hc @ components-B9PfAFRG.js:30
k @ components-B9PfAFRG.js:15
Ae @ components-B9PfAFRG.js:15
components-B9PfAFRG.js:28 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Ai (components-B9PfAFRG.js:28:4788)
    at kc (components-B9PfAFRG.js:30:45300)
    at yc (components-B9PfAFRG.js:30:39531)
    at Yd (components-B9PfAFRG.js:30:39504)
    at hc (components-B9PfAFRG.js:30:34559)
    at k (components-B9PfAFRG.js:15:1561)
    at MessagePort.Ae (components-B9PfAFRG.js:15:1928)
Ai @ components-B9PfAFRG.js:28
kc @ components-B9PfAFRG.js:30
yc @ components-B9PfAFRG.js:30
Yd @ components-B9PfAFRG.js:30
hc @ components-B9PfAFRG.js:30
k @ components-B9PfAFRG.js:15
Ae @ components-B9PfAFRG.js:15
components-B9PfAFRG.js:28 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Ai (components-B9PfAFRG.js:28:4788)
    at kc (components-B9PfAFRG.js:30:45300)
    at yc (components-B9PfAFRG.js:30:39531)
    at Yd (components-B9PfAFRG.js:30:39504)
    at hc (components-B9PfAFRG.js:30:34559)
    at k (components-B9PfAFRG.js:15:1561)
    at MessagePort.Ae (components-B9PfAFRG.js:15:1928)
Ai @ components-B9PfAFRG.js:28
kc @ components-B9PfAFRG.js:30
yc @ components-B9PfAFRG.js:30
Yd @ components-B9PfAFRG.js:30
hc @ components-B9PfAFRG.js:30
k @ components-B9PfAFRG.js:15
Ae @ components-B9PfAFRG.js:15
components-B9PfAFRG.js:28 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Ai (components-B9PfAFRG.js:28:4788)
    at kc (components-B9PfAFRG.js:30:45300)
    at yc (components-B9PfAFRG.js:30:39531)
    at Yd (components-B9PfAFRG.js:30:39504)
    at hc (components-B9PfAFRG.js:30:34559)
    at k (components-B9PfAFRG.js:15:1561)
    at MessagePort.Ae (components-B9PfAFRG.js:15:1928)
Ai @ components-B9PfAFRG.js:28
kc @ components-B9PfAFRG.js:30
yc @ components-B9PfAFRG.js:30
Yd @ components-B9PfAFRG.js:30
hc @ components-B9PfAFRG.js:30
k @ components-B9PfAFRG.js:15
Ae @ components-B9PfAFRG.js:15
components-B9PfAFRG.js:28 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Ai (components-B9PfAFRG.js:28:4788)
    at kc (components-B9PfAFRG.js:30:45300)
    at yc (components-B9PfAFRG.js:30:39531)
    at Yd (components-B9PfAFRG.js:30:39504)
    at hc (components-B9PfAFRG.js:30:34559)
    at k (components-B9PfAFRG.js:15:1561)
    at MessagePort.Ae (components-B9PfAFRG.js:15:1928)
Ai @ components-B9PfAFRG.js:28
kc @ components-B9PfAFRG.js:30
yc @ components-B9PfAFRG.js:30
Yd @ components-B9PfAFRG.js:30
hc @ components-B9PfAFRG.js:30
k @ components-B9PfAFRG.js:15
Ae @ components-B9PfAFRG.js:15
components-B9PfAFRG.js:30 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at kc (components-B9PfAFRG.js:30:44960)
    at yc (components-B9PfAFRG.js:30:39531)
    at Kd (components-B9PfAFRG.js:30:39462)
    at ml (components-B9PfAFRG.js:30:39320)
    at ro (components-B9PfAFRG.js:30:35737)
    at hc (components-B9PfAFRG.js:30:34693)
    at k (components-B9PfAFRG.js:15:1561)
    at MessagePort.Ae (components-B9PfAFRG.js:15:1928)
kc @ components-B9PfAFRG.js:30
yc @ components-B9PfAFRG.js:30
Kd @ components-B9PfAFRG.js:30
ml @ components-B9PfAFRG.js:30
ro @ components-B9PfAFRG.js:30
hc @ components-B9PfAFRG.js:30
k @ components-B9PfAFRG.js:15
Ae @ components-B9PfAFRG.js:15
  • But in both cases, the app page displays correctly in the browser
@normancarcamo
Copy link

normancarcamo commented Mar 17, 2024 •
edited
Loading

Same thing is happening to me, this is not right, even if you don't use a vite template this happen.

https://remix.run/docs/en/main/start/quickstart#installation

Remix version: 2.8.1

@yoni-noma
Copy link

yep, to me as well
"vite": "^5.1.6",
"@remix-run/react": "^2.8.1",
"react": "^18.3.0-next-fecc288b7-20221025",

@brophdawg11
Copy link
Contributor

I think this is a dup of #4822 and is likely caused by Chrome extensions modifying the DOM. This does not happen for me on a fresh app - can you try loading the app in an Incognito browser with no extensions?

@brophdawg11 brophdawg11 added needs-response We need a response from the original author about this issue/PR hydration labels Mar 18, 2024
@John3812
Copy link
Author

John3812 commented Mar 20, 2024 •
edited
Loading

@brophdawg11 , Yes, you're right. The reason was the "Dark Mode" extension.

@github-actions github-actions bot removed the needs-response We need a response from the original author about this issue/PR label Mar 20, 2024
@brophdawg11 brophdawg11 closed this as not planned Won't fix, can't repro, duplicate, stale Mar 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug:unverified hydration
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@brophdawg11 @normancarcamo @John3812 @yoni-noma