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.

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

Hydration error with react SSR #3305

Open
Neaox opened this issue Feb 1, 2025 · 0 comments
Open

Hydration error with react SSR #3305

Neaox opened this issue Feb 1, 2025 · 0 comments

Comments

@Neaox
Copy link

Neaox commented Feb 1, 2025

Which project does this relate to?

Router

Describe the bug

A simple application using SSR (streamed or non-streamed) fails to hydrate. The stack trace seems to point to the router being the issue:

Warning: Did not expect server HTML to contain a <div> in <div>.
at Suspense
at Matches (https://vitejsviteycpx87r5-ptqx--5173--d20a0a75.local-credentialless.webcon…er.io/node_modules/.vite/deps/@tanstack_react-router.js?v=fb30a0d2:3418:18)
at RouterContextProvider (https://vitejsviteycpx87r5-ptqx--5173--d20a0a75.local-credentialless.webcon…ner.io/node_modules/.vite/deps/@tanstack_react-router.js?v=fb30a0d2:5175:3)
at RouterProvider (https://vitejsviteycpx87r5-ptqx--5173--d20a0a75.local-credentialless.webcon…er.io/node_modules/.vite/deps/@tanstack_react-router.js?v=fb30a0d2:5194:27)

Uncaught Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.
at updateDehydratedSuspenseComponent (chunk-QXLG2TGQ.js?v=fb30a0d2:15409:57)
at updateSuspenseComponent (chunk-QXLG2TGQ.js?v=fb30a0d2:15164:24)
at beginWork (chunk-QXLG2TGQ.js?v=fb30a0d2:15985:22)
at beginWork$1 (chunk-QXLG2TGQ.js?v=fb30a0d2:19804:22)
at performUnitOfWork (chunk-QXLG2TGQ.js?v=fb30a0d2:19249:20)
at workLoopConcurrent (chunk-QXLG2TGQ.js?v=fb30a0d2:19240:13)
at renderRootConcurrent (chunk-QXLG2TGQ.js?v=fb30a0d2:19215:15)
at performConcurrentWorkOnRoot (chunk-QXLG2TGQ.js?v=fb30a0d2:18726:46)
at workLoop (chunk-QXLG2TGQ.js?v=fb30a0d2:195:42)
at flushWork (chunk-QXLG2TGQ.js?v=fb30a0d2:174:22)

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-ycpx87r5

Steps to Reproduce the Bug or Issue

  1. Go to the homepage
  2. Open dev tools

Expected behavior

The application hydrates successfully

Screenshots or Videos

Image

Platform

  • OS: Mac OS
  • Browser: Chrome
  • Version: 132.0.6834.160

Additional context

No response

@Neaox Neaox changed the title Cannot Hydrate server rendered application Hydration error with SSR application Feb 1, 2025
@Neaox Neaox changed the title Hydration error with SSR application Hydration error with react SSR Feb 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant