Skip to content

Cypress hydration failed error #13359

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
Open
javialon26 opened this issue Apr 4, 2025 · 0 comments
Open

Cypress hydration failed error #13359

javialon26 opened this issue Apr 4, 2025 · 0 comments
Labels
bug feat:hydration pkg:react-router

Comments

@javialon26
Copy link

I'm using React Router as a...

framework

Reproduction

When using Cypress in e2e mode, the React Router application fails with the error "Hydration failed." This happens in both SPA and SSR modes.

The following example was created with create-react-router, and Cypress was installed.

To reproduce the error:

  1. Clone the following repository and install the dependencies using pnpm or another package manager.
  2. Run pnpm dev in one terminal.
  3. Run pnpm cy:open in another terminal.
  4. Execute the test and observe the error.

If you access the application using Chrome or any other browser outside of Cypress, everything works as expected.

Link to repository:
https://github.com/javialon26/react-router-cypress

System Info

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 2.70 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.12.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 9.1.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 134.0.6998.166
    Safari: 17.6
  npmPackages:
    @react-router/dev: ^7.4.1 => 7.4.1 
    @react-router/node: ^7.4.1 => 7.4.1 
    @react-router/serve: ^7.4.1 => 7.4.1 
    react-router: ^7.4.1 => 7.4.1 
    vite: ^5.4.11 => 5.4.17

Used Package Manager

pnpm

Expected Behavior

The application must render without error.

Actual Behavior

An hydration error occurs:

(uncaught exception)Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used: - A server/client branch if (typeof window !== 'undefined'). - Variable input such as Date.now() or Math.random() which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. https://react.dev/link/hydration-mismatch ... <Router basename="/" location={{pathname:"/", ...}} navigationType="POP" navigator={{...}}> <DataRoutes routes={[...]} future={{...}} state={{...}}> <RenderErrorBoundary location={{pathname:"/", ...}} revalidation="idle" component={<Layout>} error={undefined} ...> <RenderedRoute match={{params:{}, ...}} routeContext={{outlet:null, ...}}> <Layout> <html lang="en"> <head> <meta> <meta> <Meta> <Links> + <style dangerouslySetInnerHTML={{__html:"\n/* /app/..."}}> - {" "} ... ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug feat:hydration pkg:react-router
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@brophdawg11 @javialon26