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

React Hydration Error upon loading hello world starter #505

Open
sun33t opened this issue Feb 14, 2023 · 12 comments
Open

React Hydration Error upon loading hello world starter #505

sun33t opened this issue Feb 14, 2023 · 12 comments
Labels
Bug Something isn't working Remix

Comments

@sun33t
Copy link

sun33t commented Feb 14, 2023

What is the location of your example repository?

No location - just spun up the hello world template and ran the dev script

What version of Hydrogen are you using?

v2023.1.2

What version of Remix are you using?

v1.12.0

Steps to Reproduce

  1. npm create @shopify/hydrogen@latest
  2. choose hello world
  3. choose typescript
  4. choose install dir
  5. install with npm - yes
  6. cd into install dir and execute npm run dev

Expected Behavior

Following the execution of npm run dev, its expected to view the site at localhost:3000 and to not see any react errors within the browser console.

Actual Behavior

Following the execution of npm run dev, when I expect the index page at localhost:3000 within chrome (with react-dev-tools installed) A number of console errors are present related to react hydration errors.

Screenshot 2023-02-14 at 06 19 06

Not sure if this is an obvious fix, but I figured it's worth raising as I've not modified any of the code within the hello world started other than to run npm update @shopify/hydrogen - I thought I'd try updating first in case there was a fix included but the error is present in the current version as well as the previous version.
@sun33t
Copy link
Author

sun33t commented Feb 14, 2023

Could this issue be linked to remix-run/remix#5416 and as such not a @shopify/hydrogen framework issue but linked to my browser extension configuration or remix? Apologies if so.

@davidhousedev
Copy link
Contributor

@sun33t You can try loading your app within a private browsing window, or a different browser that doesn't have any extensions installed, in order to test whether that's the problem :)

@sun33t
Copy link
Author

sun33t commented Feb 15, 2023

Thanks @davidhousedev, I did exactly that and experienced the following:

Normal Chrome window with apollo client dev tools - hydration errors
Incognito Chrome (no extensions) - no errors
Normal Chrome window without apollo client dev tools - no hydration errors

I repeated the same steps above for Firefox and received the same results so I think it's definitely happening because of Apollo Client devtools.

@lordofthecactus
Copy link
Contributor

lordofthecactus commented Feb 16, 2023 •
edited

This related to Remix and React. More info: remix-run/remix#4902

@karlhass15
Copy link

Since the @Shopify packages seem to be having issues from recent commits I went back to just
npm create @shopify/hydrogen npm install npm run dev
leaving off the @latest
I also had a hydrogen 2 project from the first day of release I had work in that I had did a pull and npm install and hit all the package vulnerabilities and errors after npm run dev. So I deleted my node_modules and replaced the package.json and package.lock with the code from repo where I did npm create @shopify/hydrogen and then re-ran npm install and npm dev on it and it was back up and working.

@duncan-fairley
Copy link

duncan-fairley commented Feb 25, 2023 •
edited

Here is a temporary fix that is getting us past this problem on our Hydrogen 2 builds that use Styled Components (applied here to the H2 hello-world template.

Based on @kiliman's initial fix, wrapped into remix-island by @Xiphe and remix-run/remix#5244 (reply in thread) by @clgeoio

More information:

@juanpprieto juanpprieto added Bug Something isn't working Remix labels Mar 10, 2023
@tomh4
Copy link

tomh4 commented Oct 26, 2023

@duncan-fairley is this really solving the issue for you?
I am still experiencing it, but with your solution the error becomes:

Warning: Expected server HTML to contain a matching <body> in <div>.
    at body

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

 Warning: validateDOMNesting(...): <body> cannot appear as a child of <div>.
    at body

@tomh4
Copy link

tomh4 commented Nov 19, 2023

Is there anything I can do about this?

@blittle
Copy link
Contributor

blittle commented Nov 21, 2023

As this is really a fundamental React problem, there isn't that much to do at the moment. Though you can try if the React 1.8.3-canary release helps.

@tomh4
Copy link

tomh4 commented Dec 2, 2023 •
edited

@blittle I tried 18.3 but it did not help, with the hydration error, but updating the react dom as well to canary at least got the flashing away.
the hydration errors still exist in the logs

@eldevflo
Copy link

eldevflo commented Mar 26, 2024 •
edited

I am experiencing this issue, it prevents my modals and drawers from rendering with issues "only in production". I am using chakra UI for the drawers and modals. are there any fixes for this? @sun33t

image

@tomh4
Copy link

tomh4 commented Mar 26, 2024

I havent found any...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Something isn't working Remix
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@duncan-fairley @lordofthecactus @blittle @juanpprieto @karlhass15 @davidhousedev @tomh4 @sun33t @eldevflo