-
Notifications
You must be signed in to change notification settings - Fork 246
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.
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
React Hydration Error upon loading hello world starter #505
Comments
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. |
@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 :) |
Thanks @davidhousedev, I did exactly that and experienced the following: Normal Chrome window with apollo client dev tools - 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. |
This related to Remix and React. More info: remix-run/remix#4902 |
Since the @Shopify packages seem to be having issues from recent commits I went back to just |
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: |
@duncan-fairley is this really solving the issue for you?
|
Is there anything I can do about this? |
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. |
@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. |
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 |
I havent found any... |
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
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.
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.
The text was updated successfully, but these errors were encountered: