Skip to content

Basic example console error: Did not expect server HTML to contain a <div> in <html>. #10405

New issue
New issue
Open
Open
Basic example console error: Did not expect server HTML to contain a <div> in <html>.#10405
Labels
bug:unverified
@guotie

Description

@guotie
guotie
opened on Jan 14, 2025

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug:unverified

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions