Skip to content

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

Open
@guotie

Description

@guotie

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions