HMR is broken

[jamalsoueidan]

What is the location of your example repository?

no need

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

latest

What version of Remix are you using?

default version of hydrogen

Steps to Reproduce

Very simple, use mantine ui library as example

Expected Behavior

This is latest version of hydrogen.

1. npm install mantine
2. use mantine components
3. hmr is broken on few changes to code

https://github.com/Shopify/hydrogen/assets/115714/f0ba8552-f81d-46d4-9bed-0012a6b40e39

yes it's fast for few seconds, but breaks after few seconds.

Actual Behavior

Just try to change any text in any document.

[jamalsoueidan]

I tried adding:

abortDelay (didn't work) Incognite window (didn't work) --legacy-runtime (didn't work) both mac and windows (same issue) tried shadcn+tailwind (same issue)

[jamalsoueidan]

I'm not an expert in Vite configuration, but I've noticed that when I don't have the site open, I can save any changes to the file without the server encountering issues.

However, when I open the site and Vite connects via a socket (or similar method) to send the updated changes, the server breaks. It's possible that the browser imposes some restrictions that prevent Vite from canceling ongoing promises.

[frandiox]

Hey 👋 I've been trying to reproduce this issue in different scenarios without much luck. Would you be able to provide a minimal reproduction in a repository so that we can debug it?

I'm not an expert in Vite configuration, but I've noticed that when I don't have the site open, I can save any changes to the file without the server encountering issues.

Yes, this is because there are no requests to the worker if you don't have the site open.

It's possible that the browser imposes some restrictions that prevent Vite from canceling ongoing promises.

The browser sends a request to Vite, which we then forward from Vite to the worker process that runs your backend code. The browser does cancel its request but we are not canceling the forwarded request to the worker. I've tried to cancel the forwarded request once the browser one is aborted and only then I can see errors about hanging promises, although HMR still doesn't break. So I don't know why you're seeing these errors when we are not canceling the forwarded request. As mentioned, a small reproduction repository would be really helpful 🙌

---

Something you could try in your project to see if it has any effect: run the following code in your fetch handler inside server.ts:

export default {
   fetch(request, ...) {
+    globalThis.__H2O_LOG_EVENT = undefined;
+    globalThis.__remix_devServerHooks = undefined;

     // the rest of your code
   }
}

Following the stack trace in your video, it seems the issue is around this globalThis functions but I'm not able to get the error...

[jamalsoueidan]

I show you in the video it's a fresh project, all files is not touched, only the files i show is modified.

The code you show me didn't do any difference.

[jamalsoueidan]

It's fixed!