Open
Description
Reproduction
https://stackblitz.com/edit/remix-run-remix-prc4mze6?file=package.json
System Info
System:
OS: macOS 14.6.1
CPU: (10) arm64 Apple M1 Pro
Memory: 348.30 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 23.5.0 - /opt/homebrew/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 10.9.2 - /opt/homebrew/bin/npm
pnpm: 8.6.6 - /opt/homebrew/bin/pnpm
bun: 1.1.16 - ~/.bun/bin/bun
Browsers:
Brave Browser: 121.1.62.165
Chrome: 131.0.6778.265
Edge: 131.0.2903.147
Safari: 17.6
npmPackages:
@remix-run/dev: ^2.15.2 => 2.15.2
@remix-run/node: ^2.15.2 => 2.15.2
@remix-run/react: ^2.15.2 => 2.15.2
@remix-run/serve: ^2.15.2 => 2.15.2
vite: ^5.1.0 => 5.4.11
Used Package Manager
npm
Expected Behavior
no console error
Actual Behavior
hook.js:608 Warning: Did not expect server HTML to contain a <div> in <html>. Error Component Stack
at html (<anonymous>)
at Layout (root.tsx:25:26)
at RenderedRoute (@remix-run_react.js?v=91be59b0:4255:5)
at RenderErrorBoundary (@remix-run_react.js?v=91be59b0:4215:5)
at DataRoutes (@remix-run_react.js?v=91be59b0:5277:5)
at Router (@remix-run_react.js?v=91be59b0:4630:15)
at RouterProvider (@remix-run_react.js?v=91be59b0:5091:5)
at RemixErrorBoundary (@remix-run_react.js?v=91be59b0:7159:5)
at RemixBrowser (@remix-run_react.js?v=91be59b0:8718:46)
overrideMethod @ hook.js:608
printWarning @ chunk-55ARYQQG.js?v=91be59b0:519
error @ chunk-55ARYQQG.js?v=91be59b0:503
warnForDeletedHydratableElement @ chunk-55ARYQQG.js?v=91be59b0:7980
didNotHydrateInstance @ chunk-55ARYQQG.js?v=91be59b0:8705
warnUnhydratedInstance @ chunk-55ARYQQG.js?v=91be59b0:9307
warnIfUnhydratedTailNodes @ chunk-55ARYQQG.js?v=91be59b0:9616
popHydrationState @ chunk-55ARYQQG.js?v=91be59b0:9592
completeWork @ chunk-55ARYQQG.js?v=91be59b0:16282
completeUnitOfWork @ chunk-55ARYQQG.js?v=91be59b0:19222
performUnitOfWork @ chunk-55ARYQQG.js?v=91be59b0:19204
workLoopConcurrent @ chunk-55ARYQQG.js?v=91be59b0:19187
renderRootConcurrent @ chunk-55ARYQQG.js?v=91be59b0:19162
performConcurrentWorkOnRoot @ chunk-55ARYQQG.js?v=91be59b0:18676
workLoop @ chunk-55ARYQQG.js?v=91be59b0:195
flushWork @ chunk-55ARYQQG.js?v=91be59b0:174
performWorkUntilDeadline @ chunk-55ARYQQG.js?v=91be59b0:382Understand this errorAI
hook.js:608 Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (chunk-55ARYQQG.js?v=91be59b0:9471:17)
at tryToClaimNextHydratableInstance (chunk-55ARYQQG.js?v=91be59b0:9492:15)
at updateHostComponent (chunk-55ARYQQG.js?v=91be59b0:14792:13)
at beginWork (chunk-55ARYQQG.js?v=91be59b0:15933:22)
at beginWork$1 (chunk-55ARYQQG.js?v=91be59b0:19751:22)
at performUnitOfWork (chunk-55ARYQQG.js?v=91be59b0:19196:20)
at workLoopConcurrent (chunk-55ARYQQG.js?v=91be59b0:19187:13)
at renderRootConcurrent (chunk-55ARYQQG.js?v=91be59b0:19162:15)
at performConcurrentWorkOnRoot (chunk-55ARYQQG.js?v=91be59b0:18676:46)
at workLoop (chunk-55ARYQQG.js?v=91be59b0:195:42) Error Component Stack
at RemixRootDefaultErrorBoundary (@remix-run_react.js?v=91be59b0:7194:3)
at RemixErrorBoundary (@remix-run_react.js?v=91be59b0:7159:5)
at RemixBrowser (@remix-run_react.js?v=91be59b0:8718:46)
overrideMethod @ hook.js:608
RemixRootDefaultErrorBoundary @ @remix-run_react.js?v=91be59b0:7197
renderWithHooks @ chunk-55ARYQQG.js?v=91be59b0:11546
mountIndeterminateComponent @ chunk-55ARYQQG.js?v=91be59b0:14924
beginWork @ chunk-55ARYQQG.js?v=91be59b0:15912
beginWork$1 @ chunk-55ARYQQG.js?v=91be59b0:19751
performUnitOfWork @ chunk-55ARYQQG.js?v=91be59b0:19196
workLoopConcurrent @ chunk-55ARYQQG.js?v=91be59b0:19187
renderRootConcurrent @ chunk-55ARYQQG.js?v=91be59b0:19162
performConcurrentWorkOnRoot @ chunk-55ARYQQG.js?v=91be59b0:18676
workLoop @ chunk-55ARYQQG.js?v=91be59b0:195
flushWork @ chunk-55ARYQQG.js?v=91be59b0:174
performWorkUntilDeadline @ chunk-55ARYQQG.js?v=91be59b0:382Understand this errorAI
hook.js:600 Error: Hydration failed because the initial UI does not match what was rendered on the server. Error Component Stack
at RemixRootDefaultErrorBoundary (@remix-run_react.js?v=91be59b0:7194:3)
at RemixErrorBoundary (@remix-run_react.js?v=91be59b0:7159:5)
at RemixBrowser (@remix-run_react.js?v=91be59b0:8718:46)
overrideMethod @ hook.js:600
RemixRootDefaultErrorBoundary @ @remix-run_react.js?v=91be59b0:7197
renderWithHooks @ chunk-55ARYQQG.js?v=91be59b0:11546
mountIndeterminateComponent @ chunk-55ARYQQG.js?v=91be59b0:14974
beginWork @ chunk-55ARYQQG.js?v=91be59b0:15912
beginWork$1 @ chunk-55ARYQQG.js?v=91be59b0:19751
performUnitOfWork @ chunk-55ARYQQG.js?v=91be59b0:19196
workLoopConcurrent @ chunk-55ARYQQG.js?v=91be59b0:19187
renderRootConcurrent @ chunk-55ARYQQG.js?v=91be59b0:19162
performConcurrentWorkOnRoot @ chunk-55ARYQQG.js?v=91be59b0:18676
workLoop @ chunk-55ARYQQG.js?v=91be59b0:195
flushWork @ chunk-55ARYQQG.js?v=91be59b0:174
performWorkUntilDeadline @ chunk-55ARYQQG.js?v=91be59b0:382Understand this errorAI
hook.js:608 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
overrideMethod @ hook.js:608
printWarning @ chunk-55ARYQQG.js?v=91be59b0:519
error @ chunk-55ARYQQG.js?v=91be59b0:503
errorHydratingContainer @ chunk-55ARYQQG.js?v=91be59b0:8751
recoverFromConcurrentError @ chunk-55ARYQQG.js?v=91be59b0:18731
performConcurrentWorkOnRoot @ chunk-55ARYQQG.js?v=91be59b0:18682
workLoop @ chunk-55ARYQQG.js?v=91be59b0:195
flushWork @ chunk-55ARYQQG.js?v=91be59b0:174
performWorkUntilDeadline @ chunk-55ARYQQG.js?v=91be59b0:382Understand this errorAI
chunk-55ARYQQG.js?v=91be59b0:9471 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (chunk-55ARYQQG.js?v=91be59b0:9471:17)
at popHydrationState (chunk-55ARYQQG.js?v=91be59b0:9593:17)
at completeWork (chunk-55ARYQQG.js?v=91be59b0:16282:36)
at completeUnitOfWork (chunk-55ARYQQG.js?v=91be59b0:19222:24)
at performUnitOfWork (chunk-55ARYQQG.js?v=91be59b0:19204:13)
at workLoopConcurrent (chunk-55ARYQQG.js?v=91be59b0:19187:13)
at renderRootConcurrent (chunk-55ARYQQG.js?v=91be59b0:19162:15)
at performConcurrentWorkOnRoot (chunk-55ARYQQG.js?v=91be59b0:18676:46)
at workLoop (chunk-55ARYQQG.js?v=91be59b0:195:42)
at flushWork (chunk-55ARYQQG.js?v=91be59b0:174:22)
throwOnHydrationMismatch @ chunk-55ARYQQG.js?v=91be59b0:9471
popHydrationState @ chunk-55ARYQQG.js?v=91be59b0:9593
completeWork @ chunk-55ARYQQG.js?v=91be59b0:16282
completeUnitOfWork @ chunk-55ARYQQG.js?v=91be59b0:19222
performUnitOfWork @ chunk-55ARYQQG.js?v=91be59b0:19204
workLoopConcurrent @ chunk-55ARYQQG.js?v=91be59b0:19187
renderRootConcurrent @ chunk-55ARYQQG.js?v=91be59b0:19162
performConcurrentWorkOnRoot @ chunk-55ARYQQG.js?v=91be59b0:18676
workLoop @ chunk-55ARYQQG.js?v=91be59b0:195
flushWork @ chunk-55ARYQQG.js?v=91be59b0:174
performWorkUntilDeadline @ chunk-55ARYQQG.js?v=91be59b0:382Understand this errorAI
2chunk-55ARYQQG.js?v=91be59b0:9471 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (chunk-55ARYQQG.js?v=91be59b0:9471:17)
at tryToClaimNextHydratableInstance (chunk-55ARYQQG.js?v=91be59b0:9492:15)
at updateHostComponent (chunk-55ARYQQG.js?v=91be59b0:14792:13)
at beginWork (chunk-55ARYQQG.js?v=91be59b0:15933:22)
at beginWork$1 (chunk-55ARYQQG.js?v=91be59b0:19751:22)
at performUnitOfWork (chunk-55ARYQQG.js?v=91be59b0:19196:20)
at workLoopConcurrent (chunk-55ARYQQG.js?v=91be59b0:19187:13)
at renderRootConcurrent (chunk-55ARYQQG.js?v=91be59b0:19162:15)
at performConcurrentWorkOnRoot (chunk-55ARYQQG.js?v=91be59b0:18676:46)
at workLoop (chunk-55ARYQQG.js?v=91be59b0:195:42)
throwOnHydrationMismatch @ chunk-55ARYQQG.js?v=91be59b0:9471
tryToClaimNextHydratableInstance @ chunk-55ARYQQG.js?v=91be59b0:9492
updateHostComponent @ chunk-55ARYQQG.js?v=91be59b0:14792
beginWork @ chunk-55ARYQQG.js?v=91be59b0:15933
beginWork$1 @ chunk-55ARYQQG.js?v=91be59b0:19751
performUnitOfWork @ chunk-55ARYQQG.js?v=91be59b0:19196
workLoopConcurrent @ chunk-55ARYQQG.js?v=91be59b0:19187
renderRootConcurrent @ chunk-55ARYQQG.js?v=91be59b0:19162
performConcurrentWorkOnRoot @ chunk-55ARYQQG.js?v=91be59b0:18676
workLoop @ chunk-55ARYQQG.js?v=91be59b0:195
flushWork @ chunk-55ARYQQG.js?v=91be59b0:174
performWorkUntilDeadline @ chunk-55ARYQQG.js?v=91be59b0:382Understand this errorAI
chunk-55ARYQQG.js?v=91be59b0:14758 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 (chunk-55ARYQQG.js?v=91be59b0:14758:65)
at beginWork (chunk-55ARYQQG.js?v=91be59b0:15931:22)
at beginWork$1 (chunk-55ARYQQG.js?v=91be59b0:19751:22)
at performUnitOfWork (chunk-55ARYQQG.js?v=91be59b0:19196:20)
at workLoopSync (chunk-55ARYQQG.js?v=91be59b0:19135:13)
at renderRootSync (chunk-55ARYQQG.js?v=91be59b0:19114:15)
at recoverFromConcurrentError (chunk-55ARYQQG.js?v=91be59b0:18734:28)
at performConcurrentWorkOnRoot (chunk-55ARYQQG.js?v=91be59b0:18682:30)
at workLoop (chunk-55ARYQQG.js?v=91be59b0:195:42)
at flushWork (chunk-55ARYQQG.js?v=91be59b0:174:22)
Activity