search

remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
29.21k stars 2.46k forks source link

Remix v2 causes hydration errors when running cypress #7592

Open charklewis opened 11 months ago

charklewis commented 11 months ago

What version of Remix are you using?

2.0.1

Are all your remix dependencies & dev-dependencies using the same version?

Steps to Reproduce

  1. use npx create-remix to create a remix app
  2. add cypress (npm install cypress --save-dev)
  3. create a cypress test that just visits the index route

Sample repo with this setup - https://github.com/charklewis/my-remix-app

Expected Behavior

I should be able to run cypress without having hydration errors that stop the tests from completing.

Actual Behavior

There are two main errors the eventually cause any test to fail:

  1. Expected server HTML to contain a matching <meta> in <head>
  2. Hydration failed because the initial UI does not match what was rendered on the server

I have tested this by running Cypress with Chrome, Electron and Firefox and the issue persists across all of them.

charklewis commented 11 months ago

I have checked this with remix version 2.1.0 and the issue still persists.

sergiodxa commented 11 months ago

Sounds like if Cypress is adding an extra meta tags to the DOM before React hydrates the app.

kalliub commented 4 months ago

Is there any updates on this besides bypassing these errors on Cypress? Tested with Remix 2.9.2.

provokateurin commented 3 months ago

No, we switched to puppeteer which doesn't have this problem.

charklewis commented 3 months ago

Similar here, I switched to playwright which doesn't have this problem either.

jywyq commented 1 month ago

Kinda solution here: integrate with remix-island, and implement this patch https://github.com/remix-run/remix/issues/2570#issuecomment-1099696456