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

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

Open
guotie opened this issue Jan 14, 2025 · 0 comments
Open

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

guotie opened this issue Jan 14, 2025 · 0 comments
Labels
bug:unverified

Comments

@guotie
Copy link

guotie commented 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)
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
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@guotie