search

Shopify / hydrogen

Hydrogen lets you build faster headless storefronts in less time, on Shopify.
https://hydrogen.shop
MIT License
1.43k stars 273 forks source link

Builds take long and neither HMR, HDR nor full page reloads work in 2023.10.0 #1483

Closed HumidBrains closed 6 months ago

HumidBrains commented 1 year ago

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2023.10.0

What version of Remix are you using?

2.2.0

Steps to Reproduce

Make any code changes and save. Wait just over 7 seconds for the rebuild to finish (this took 3 seconds with Hydrogen 2023.7.13 and Remix 1.19.3).

Expected Behavior

I expect an instant update of the web page I'm working on. Either on component level or through full page reload.

Actual Behavior

No update to the web page occurs. For the changes to take effect, I need to reload the page manually. I got no errors in my code or the browser console.

Noteworthy: The site is a vastly evolved version of https://github.com/sanity-io/hydrogen-sanity-demo that has been updated to support the newest versions of Hydrogen and Remix. Unfortunately, I can't share the repo due to confidentiality.

This seems like a bug to me, but if it's not, maybe I've managed to mess something up without getting any errors?

blittle commented 1 year ago

We had a peer dependency issue, could you please update to @shopify/hydrogen@2023.10.2 and @shopify/remix-oxygen v2.0.1 and see if that fixes things.

HumidBrains commented 1 year ago

Thanks for the quick reply @blittle. Unfortunately, we had no luck with these updates. No matter what code change I make, there is no UI update coming through. Build times range between 7-8+ seconds, which makes me think it's something in my code. However, I have no idea what that would be since I didn't have such long build times before the upgrade and I got no warnings and no errors helping out. Not sure what it's worth, but when I make a manual page refresh the reload is instant, so nothing seems to get hung up if the browser just would kick off a reload. HMR has never worked for me at all, but I guess this new version is the first one where it actually should work.

HumidBrains commented 1 year ago

I went back and double-checked the commit before upgrading and the build time exactly doubled with the upgrade while breaking the UI updates. There were no other changes made for that to happen and hence it's unlikely to be an issue with my own code.

blittle commented 1 year ago

I'm going to have @frandiox look into this next week. Sorry for the regression.

jamalsoueidan commented 1 year ago

I can also confirm this it's very slow, at first I thought it was codespace, but when I start working on my windows machine it's slow, I can also test on Mac?

frandiox commented 1 year ago

I can see increased build time in our template from ~500ms to ~750ms, which could also slow down HMR/HDR. However, HMR doesn't break in my tests 🤔

Not sure yet what's the reason of the change in build speed since we have not modified anything related to this. It might come from the Remix version itself but needs further testing.

HMR has never worked for me at all, but I guess this new version is the first one where it actually should work.

Do you have the <LiveReload> component in your root? If not, the migration guide for that was here -- for Remix v2 you don't need to add future flags.

Aside from that, it looks like there might be an issue in Remix HMR that prevents it from working in some situation. Is this any similar to what you see when HMR doesn't work? https://github.com/remix-run/remix/issues/7466

thomasKn commented 1 year ago

I updated @shopify/cli to 3.50.2 and build took very long without success. I rolled back to 3.50.0 and everything works fine.

Here is the error I get with 3.50.2 image

HumidBrains commented 1 year ago

@frandiox Thank you for looking into this. I wish I had looked for any update from you earlier because I just found out that I missed the Livereload component and now I see you're pointing that out as as well. :) I had no idea that component is needed now. Anyway, now HMR works but takes just over 4 seconds. I'm sure that's due to something in my own code.

I've tested the demo site and the build times are as fast as you say. I've also looked into my old commits and found out that @egjs/react-infinitegrid was the culprit doubling the build times to 7-8+ seconds. Removed that and got the build time back to just over 4 seconds. I assume that since my site talks to Sanity, there is something related to Sanity that makes the build times slower than on the demo site.

I will try to look into this a bit more as soon as I have the time and give you an update in case it can bring value to someone else.

jamalsoueidan commented 6 months ago

@HumidBrains if everything is good, please close the issue.