Local environment freezes when navigating

[rokcetfuel]

What is the location of your example repository?

No response

Which package or tool is having this issue?

CLI

What version of that package or tool are you using?

7.0.0

What version of Remix are you using?

2.5.1

Steps to Reproduce

1. Create a new clean local environment on skeleton template, using npm create @shopify/hydrogen@latest
2. Run the environment using npm run dev
3. Open the local website, then navigate through the website many times, clicking on collections, products, changing their variants, using the search or adding to cart.

Expected Behavior

Environment never freezes.

Actual Behavior

At some point while navigating the environment freezes - a request never finishes. The URL changes can be seen, but content of the page never changes, and it cannot be refreshed (loading forever). The only thing to help is to quit and rerun npm run dev. There aren't any errors in the console, and I was unable to find any logs that would indicate a reason.

More details:

• This issue only happens on workers-based local environment. Using legacy-runtime parameter fixes it.
• The fastest way I found to trigger this is to navigate through collections and products a bit and then use the search a few times, or add to cart a few times.
• I did not manage to reproduce this on the demo store template - there everything seems to work fine, no matter how many times I navigate or do complex actions like changing filters etc.

[mwshepherd]

@rokcetfuel seems to be an issue with the new 2024-01 Hydrogen release. I've been having the same issues attempting to query data from Searchspring server side. It will work if I defer the promise and then use Suspense and the Await component to resolve it client side, but waiting server side now breaks and the same issue has as you've describe, infinite pending of the route.

I can see the note on their Oxygen runtime page about using the --legacy-runtime. When I use this is works perfectly fine for me.

Question is, how is this going to affect deployments to Oxygen in production? Would be great to get some more info around this from Shopify

[frandiox]

@rokcetfuel @mwshepherd What OS are you using?

I've done like 300 sub-sequent requests in the product page several times and didn't find the issue. However another time I think I saw the issue with just ~20 requests or so 🤔

It makes me think it's something related to cache timing but I can't be sure without a reliable way to reproduce it :/
If you know an easier way to reproduce it, please let us know.

Question is, how is this going to affect deployments to Oxygen in production? Would be great to get some more info around this from Shopify

This has nothing to do with Oxygen deployments, afaik.

[mwshepherd]

@frandiox running macOS

I made a new issues report today detailing my exact issue with fetching from third party apis in the loader of the collection page #1784

I thought it might affect production as the runtime will be the same when hosted vs running locally

[rokcetfuel]

@frandiox

For the OS: MacOS, Intel, Sonoma. I was also able to reproduce on Mac with M1.

For the reproduction: I am aware it's quite unpredictable :/ Hard to describe exactly, but for me this always happens when I use the search a few times. After a few searches, in between clicking between collections, it always freezes at some point. Here's what I tried today - the last page on the list is when it froze (Skeleton template).

Thanks for taking a look!

[blittle]

A shot in the dark, but perhaps this might be related? Are you making fetch requests without reading the body?

https://twitter.com/cramforce/status/1762142087930433999