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.

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

create-remix@latest results in hydration errors on unmodified build #5416

Closed
1 task done
wulfmann opened this issue Feb 10, 2023 · 8 comments
Closed
1 task done

create-remix@latest results in hydration errors on unmodified build #5416

wulfmann opened this issue Feb 10, 2023 · 8 comments
Assignees
@brophdawg11
Labels
bug:unverified hydration

Comments

@wulfmann
Copy link

wulfmann commented Feb 10, 2023 •
edited

What version of Remix are you using?

1.12.0

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

  • Yes

Steps to Reproduce

% npx create-remix@latest repro
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix App Server if you're unsure; it's easy to change deployment targets. Vercel
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes

Then:

npm run dev

console screenshot

Repro: https://github.com/wulfmann/remix-repro

Expected Behavior

A fresh bare build does not log hydration errors.

Actual Behavior

Hydration errors are logged complaining about a missing closing <head> tag.
@wulfmann
Copy link
Author

Created reproduction repo here: https://github.com/wulfmann/remix-repro

Similar issues:

@manurana
Copy link

OK, I think I figured this one out
I had to disable the Apollo Client Devtools extension to fix this error
This was observed on Firefox Developer Edition 110, as well as Chrome Canary 112

@wulfmann
Copy link
Author

Sorry I should have included I was on chrome. I also had that extension and disabling it indeed seems to have fixed this issue. Nice find!

Is this an issue with the extension then?

@sun33t sun33t mentioned this issue Feb 14, 2023
Open
@frontendphil
Copy link

Mind. Blown. 🤯 Sorry for the spam, but thanks SO MUCH! That extension caused me hours of looking through the code why stuff would be different.

@clgeoio
Copy link

clgeoio commented Feb 20, 2023

This issue has been seen before - there's a proposal about it here: #5244

@l-portet
Copy link

Had this issue happening with the Meteor devtools extension too (Chrome 111).

@nichtsam
Copy link

nichtsam commented Apr 9, 2023

Same issue, disabling all extensions fixed it, I'm guessing the scripts injection of extensions caused this?

pnpm create remix@latest
# node v18.15.0
# Brave 1.50.114 Chromium: 112.0.5615.49 (arm64)

@brophdawg11 brophdawg11 self-assigned this Aug 3, 2023
@brophdawg11
Copy link
Contributor

I believe this is a duplicate of the #5244 and will be (hopefully) addressed when React 18.3 is released. See facebook/react#24430 (comment) for more information.

I'm going to close this out as there's not much Remix can do it seems.

@brophdawg11 brophdawg11 closed this as not planned Won't fix, can't repro, duplicate, stale Aug 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@brophdawg11 brophdawg11

Labels
bug:unverified hydration
Projects
No open projects
v2
Status: Closed
Milestone
No milestone
Development

No branches or pull requests
8 participants
@frontendphil @machour @brophdawg11 @manurana @wulfmann @l-portet @clgeoio @nichtsam