#Hydration failing when running an app in Cypress but not in my normal browser

1 messages · Page 1 of 1 (latest)

wraith mica
#

Is there any obvious reason why I'd get the following error in my console in Cypress but not in my normal browser?

(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.
(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.
(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.
(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.
(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.
(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.
(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.
(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.
(uncaught exception)Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

FWIW I think the error is happening in my Meta component, but I'm not doing anything fancy there:

Warning: Expected server HTML to contain a matching <meta> in <head>.

I'm wondering if whatever I'm seeing is the same as this: https://github.com/remix-run/remix/issues/2570

GitHub
React 18 : Hydration failed because the initial UI does not match w...

What version of Remix are you using? 1.3.4 Steps to Reproduce Update https://github.com/remix-run/indie-stack/tree/main react: 18.0.0 react-dom: 18.0.0 Update entry.client.tsx : import { hydrateRoo...

small brook
#

Hi there, did you manage to find a solution to this? I'm having the same issues

spare estuary
#

Hi, there. Hydration failure occurs when your server side rendered html doesn't match the browser rendered html. You must be doing something which makes the difference.

#

Copy the source html from browser and compare it with the server output and see where the data is not hydrated properly.

small brook
#

Yes I know that - this is an issue caused by Remix + styled-components

#

The current workaround in the docs is working for me, but not in Cypress

#

(workaround form the docs)

lucid bough
small brook
#

@lucid bough I am running in Cypress locally in Chrome and in Electron and the same behaviour exists in both

stark kraken
#

Apparently this is a react specific issue with the way third party extensions inject scripts in to the DOM and how hydrate root works.
If you are interested in how react explains it, here is a good link to the issue.
https://github.com/facebook/react/issues/24430#issuecomment-1440427646

A user in that same thread gave a work-around for the cypress issue you seem to be having. He suggested this:

if (process.env.NODE_ENV === 'test') {
  require('react-dom').hydrate(<RemixBrowser />, document);
} else {
  hydrateRoot(document, <RemixBrowser />);
}

I assume this is because hydrate creates warnings and defaults to client side rendering where hydrate root will cause a crash because it doesn't default.

His understanding of the issue is because cypress also injects into the DOM creating a similar problem as the third party extensions.

Maybe this helps, maybe this doesn't. But it's worth a shot.

React still seems to be working on a solution.

GitHub
Bug: Hydration mismatch error due to plugins generating script tag ...

React version: 18.0.0, 18.1.0-next-fc47cb1b6-20220404 (latest version in codesandbox) Steps To Reproduce Install a plugin that creates a script tag at the top(ex: Apollo Client Devtools) Go to the ...

cloud stag
#

I’ve fought this problem over and over. Things to check:

  1. Is Cypress injecting anything, possibly into the head?
  2. Do you have a browser plug-in that’s modifying the DOM?
  3. Is your CSS setup generating exactly the same style tags during hydration?
small brook
#

@stark kraken Thanks so much for the pointers. I'm going to attempt those changes now 💪🏻

small brook
#

This works. Thanks @stark kraken Looking forward to a fix from React soon though 🥳

stark kraken
#

Glad you got it working

wraith mica
# small brook Hi there, did you manage to find a solution to this? I'm having the same issues

I didn't, but it seems that we're not the first to encounter this: https://github.com/remix-run/indie-stack/commit/d96ff231dd777b612337c98fd96641068fbd3201

import "@testing-library/cypress/add-commands";
import "./commands";

Cypress.on("uncaught:exception", (err) => {
  // Cypress and React Hydrating the document don't get along
  // for some unknown reason. Hopefully we figure out why eventually
  // so we can remove this.
  if (
    /hydrat/i.test(err.message) ||
    /Minified React error #418/.test(err.message) ||
    /Minified React error #423/.test(err.message)
  ) {
    return false;
  }
});
GitHub
improve workarounds · remix-run/indie-stack@d96ff23