Skip to content

React 18 Hydration error with the default RR7 Framework template #12942

New issue
New issue
Closed
Closed
React 18 Hydration error with the default RR7 Framework template#12942
Labels
bug
@MatteoGauthier

Description

@MatteoGauthier
MatteoGauthier
opened on Feb 3, 2025

When using React 18 with default template, I got errors in the browser.

The docs says :

React Router v7 requires the following minimum versions:
node@20
react@18
react-dom@18

I'm using React Router as a...

framework

Reproduction

git clone https://github.com/MatteoGauthier/rr7-bug-18-19.git
cd rr7-bug-18-19
pnpm i && pnpm dev

System Info

System:
    OS: macOS 14.7.1
    CPU: (8) arm64 Apple M3
    Memory: 127.47 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.local/state/fnm_multishells/34616_1738596340348/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.0 - ~/.local/state/fnm_multishells/34616_1738596340348/bin/npm
    pnpm: 9.7.0 - /opt/homebrew/bin/pnpm
    bun: 1.2.1 - ~/.bun/bin/bun
  Browsers:
    Chrome: 132.0.6834.160
    Safari: 17.6
  npmPackages:
    @react-router/dev: ^7.1.5 => 7.1.5 
    @react-router/node: ^7.1.5 => 7.1.5 
    @react-router/serve: ^7.1.5 => 7.1.5 
    react-router: ^7.1.5 => 7.1.5 
    vite: ^5.4.11 => 5.4.14

Used Package Manager

pnpm

Expected Behavior

No error logs

Actual Behavior

Warning: Did not expect server HTML to contain a <div> in <html>. Error Component Stack
    at html (<anonymous>)
    at Layout (root.tsx:26:26)
    at RenderedRoute (chunk-IR6S3I6Y.mjs:4368:26)
    at RenderErrorBoundary (chunk-IR6S3I6Y.mjs:4327:5)
    at DataRoutes (chunk-IR6S3I6Y.mjs:4913:3)
    at Router (chunk-IR6S3I6Y.mjs:4998:13)
    at RouterProvider (chunk-IR6S3I6Y.mjs:4743:3)
    at RouterProvider2 (<anonymous>)
    at RemixErrorBoundary (chunk-IR6S3I6Y.mjs:5950:5)
    at HydratedRouter (dom-export.mjs:147:46)
overrideMethod @ hook.js:608
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnForDeletedHydratableElement @ react-dom.development.js:10477
didNotHydrateInstance @ react-dom.development.js:11424
warnUnhydratedInstance @ react-dom.development.js:12313
warnIfUnhydratedTailNodes @ react-dom.development.js:12707
popHydrationState @ react-dom.development.js:12677
completeWork @ react-dom.development.js:22215
completeUnitOfWork @ react-dom.development.js:26635
performUnitOfWork @ react-dom.development.js:26607
workLoopConcurrent @ react-dom.development.js:26582
renderRootConcurrent @ react-dom.development.js:26544
performConcurrentWorkOnRoot @ react-dom.development.js:25777
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
hook.js:608 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:19931:5)
    at beginWork (react-dom.development.js:21657:14)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopConcurrent (react-dom.development.js:26582:5)
    at renderRootConcurrent (react-dom.development.js:26544:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25777:38)
    at workLoop (scheduler.development.js:266:34) Error Component Stack
    at RemixRootDefaultErrorBoundary (chunk-IR6S3I6Y.mjs:5977:3)
    at RemixErrorBoundary (chunk-IR6S3I6Y.mjs:5950:5)
    at HydratedRouter (dom-export.mjs:147:46)
overrideMethod @ hook.js:608
RemixRootDefaultErrorBoundary @ chunk-IR6S3I6Y.mjs:5980
renderWithHooks @ react-dom.development.js:15486
mountIndeterminateComponent @ react-dom.development.js:20103
beginWork @ react-dom.development.js:21626
beginWork$1 @ react-dom.development.js:27465
performUnitOfWork @ react-dom.development.js:26596
workLoopConcurrent @ react-dom.development.js:26582
renderRootConcurrent @ react-dom.development.js:26544
performConcurrentWorkOnRoot @ react-dom.development.js:25777
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
hook.js:600 Error: Hydration failed because the initial UI does not match what was rendered on the server. Error Component Stack
    at RemixRootDefaultErrorBoundary (chunk-IR6S3I6Y.mjs:5977:3)
    at RemixErrorBoundary (chunk-IR6S3I6Y.mjs:5950:5)
    at HydratedRouter (dom-export.mjs:147:46)
overrideMethod @ hook.js:600
RemixRootDefaultErrorBoundary @ chunk-IR6S3I6Y.mjs:5980
renderWithHooks @ react-dom.development.js:15486
mountIndeterminateComponent @ react-dom.development.js:20174
beginWork @ react-dom.development.js:21626
beginWork$1 @ react-dom.development.js:27465
performUnitOfWork @ react-dom.development.js:26596
workLoopConcurrent @ react-dom.development.js:26582
renderRootConcurrent @ react-dom.development.js:26544
performConcurrentWorkOnRoot @ react-dom.development.js:25777
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
hook.js:608 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
overrideMethod @ hook.js:608
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
errorHydratingContainer @ react-dom.development.js:11473
recoverFromConcurrentError @ react-dom.development.js:25885
performConcurrentWorkOnRoot @ react-dom.development.js:25789
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
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 popHydrationState (react-dom.development.js:12678:9)
    at completeWork (react-dom.development.js:22215:30)
    at completeUnitOfWork (react-dom.development.js:26635:16)
    at performUnitOfWork (react-dom.development.js:26607:5)
    at workLoopConcurrent (react-dom.development.js:26582:5)
    at renderRootConcurrent (react-dom.development.js:26544:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25777:38)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
throwOnHydrationMismatch @ react-dom.development.js:12507
popHydrationState @ react-dom.development.js:12678
completeWork @ react-dom.development.js:22215
completeUnitOfWork @ react-dom.development.js:26635
performUnitOfWork @ react-dom.development.js:26607
workLoopConcurrent @ react-dom.development.js:26582
renderRootConcurrent @ react-dom.development.js:26544
performConcurrentWorkOnRoot @ react-dom.development.js:25777
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
2react-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:19931:5)
    at beginWork (react-dom.development.js:21657:14)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopConcurrent (react-dom.development.js:26582:5)
    at renderRootConcurrent (react-dom.development.js:26544:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25777: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:19931
beginWork @ react-dom.development.js:21657
beginWork$1 @ react-dom.development.js:27465
performUnitOfWork @ react-dom.development.js:26596
workLoopConcurrent @ react-dom.development.js:26582
renderRootConcurrent @ react-dom.development.js:26544
performConcurrentWorkOnRoot @ react-dom.development.js:25777
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:19878 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:19878:57)
    at beginWork (react-dom.development.js:21654:14)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopSync (react-dom.development.js:26505:5)
    at renderRootSync (react-dom.development.js:26473:7)
    at recoverFromConcurrentError (react-dom.development.js:25889:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:25789:22)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
updateHostRoot @ react-dom.development.js:19878
beginWork @ react-dom.development.js:21654
beginWork$1 @ react-dom.development.js:27465
performUnitOfWork @ react-dom.development.js:26596
workLoopSync @ react-dom.development.js:26505
renderRootSync @ react-dom.development.js:26473
recoverFromConcurrentError @ react-dom.development.js:25889
performConcurrentWorkOnRoot @ react-dom.development.js:25789
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
client:560 [vite] server connection lost. Polling for restart...
client:736

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions