wrangler 3.11.0 breaks Remix's HMR

[tavoyne]

What version of Remix are you using?

2.0.1

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Create an app using the the Cloudflare Pages template:

npx create-remix --template remix-run/remix/templates/cloudflare-pages

Start the dev server, change something in routes/_index.tsx and notice HMR doesn't work (no error in the console). That's because wrangler 3.11.0 is used. Downgrade to wrangler 3.10.1 and HMR works again.

What's could be happening here? Is it a wrangler issue (couldn't find anything related) or does it have to do with Remix's HMR implementation?

Expected Behavior

HMR should work.

Actual Behavior

HMR doesn't work.

[JarnoLeConte]

I experienced the same problem. Wrangler 3.13.1 was used. After downgrading wrangler to 3.10.1 HMR started working again.

[KrisBraun]

Can also confirm 3.13.1 doesn't work and 3.10.1 does. Interestingly, this fix was included in 3.11.0 specifically for Remix.

Full changelog for 3.11.0

[BrandonNoad]

@mrbbot Any idea if this issue is related to your debugging changes?

[mrbbot]

Hey! 👋 Just did a bisect between 3.10.1 and 3.11.0. It seems like cloudflare/workers-sdk#4072 is the problematic change. Remix seems to look for [REMIX DEV] ... ready logs to determine when wrangler is ready to receive requests, and will only send HMR updates once this log has been seen:

remix/packages/remix-dev/devServer_unstable/index.ts

Lines 141 to 151 in 1168363

	let str: string = chunk.toString();
	let matches =
	str && str.matchAll(/\[REMIX DEV\] ([A-Fa-f0-9]+) ready/g);
	if (matches) {
	for (let match of matches) {
	let buildHash = match[1];
	if (buildHash === state.manifest?.version) {
	state.appReady?.ok();
	}
	}
	}

In the cloudflare-pages template, this is logged as soon as the worker starts up:

remix/templates/cloudflare-pages/server.ts

Lines 5 to 7 in 1168363

	if (process.env.NODE_ENV === "development") {
	logDevReady(build);
	}

I'm guessing with cloudflare/workers-sdk#4072, V8's log buffer is cleared before we request log events from the inspector. cloudflare/workers-sdk#4235 should fix this issue. 👍

[izznat]

Wrangler 3.15.0 fixed the logDevReady issue, but now for some reason the LiveReload component fails to dynamically import new module with TypeError: error loading dynamically imported module:... error. On Chrome it also produce ERR_CONNECTION_REFUSED error.

When I use wrangler 3.14.0 with logDevReady patch, it works. So, I think the cause is other commits that being released with 3.15.0.

I've tried patching the LiveReload component to wait for 3 seconds before importing in case the server is not ready yet, but that's not the cause. I've also tried to dynamically import the module in browser console. It works only if I use different url origin from what I use to access the app in the browser. For example, if I use localhost:8788 on my browser then use 0.0.0.0:8788 it works.

[TheAifam5]

In the first 3.15 installation I also get such error, then I have read above that 3.10 works, still wasn't working for me, so I installed the 3.14 - but there the HMR does not trigger but no errors in the console, so again, installed 3.15 and HMR works fine, except an error in the log:

✨ Compiled Worker successfully
│  ⛅️ wrangler 3.15.0

 workerd/util/symbolizer.c++:98: warning: Not symbolizing stack traces because $LLVM_SYMBOLIZER is not set. To symbolize stack traces, set $LLVM_SYMBOLIZER to the locati…
│ workerd/server/server.c++:2885: error: Uncaught exception: kj/async-io-unix.c++:186: disconnected: ::write(fd, buffer, size): Broken pipe
│ stack: /workspaces/portfolio/node_modules/.pnpm/@cloudflare+workerd-linux-64@1.20231025.0/node_modules/@cloudflare/workerd-linux-64/bin/workerd@3a50f8f /workspaces/port…
│ workerd/server/server.c++:2794: error: kj::getCaughtExceptionAsKj() = kj/async-io-unix.c++:186: disconnected: ::write(fd, buffer, size): Broken pipe

│ ✘ [ERROR] Unexpected end of file in source map
│     .wrangler/tmp/pages-iKGU9A/functionsWorker-0.7787544421918919.mjs.map:1:0:
│       1 │ 
│         ╵ ^
│   The source map ".wrangler/tmp/pages-iKGU9A/functionsWorker-0.7787544421918919.mjs.map" was referenced by the file ".wrangler/tmp/pages-iKGU9A/functionsWorker-0.778754…
│     .wrangler/tmp/pages-iKGU9A/functionsWorker-0.7787544421918919.mjs:17674:21:
│       17674 │ //# sourceMappingURL=functionsWorker-0.7787544421918919.mjs.map

Deleted node_modules and package.lock.json, works fine.

[NickCis]

The bug is present in current install of remix cloudflare-pages template (it install wrangler@3.15.0)

npx create-remix@latest --template remix-run/remix/templates/cloudflare-pages

For those who just want a simple fix, you can force the wrangler version to 3.10.1 (as it was said), run a npm insall and it will work:

diff --git a/package.json b/package.json
index 4bfb930..53d84fd 100644
--- a/package.json
+++ b/package.json
@@ -26,9 +26,9 @@
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.38.0",
     "typescript": "^5.1.0",
-    "wrangler": "^3.1.1"
+    "wrangler": "3.10.1"
   },
   "engines": {
     "node": ">=18.0.0"
   }

For the time being, couldn't be preferable to change current remix template and force wrangler@3.10.1?.

[KrisBraun]

Wrangler 3.15.0 fixed the logDevReady issue, but now for some reason the LiveReload component fails to dynamically import new module with TypeError: error loading dynamically imported module:... error. On Chrome it also produce ERR_CONNECTION_REFUSED error.

When I use wrangler 3.14.0 with logDevReady patch, it works. So, I think the cause is other commits that being released with 3.15.0.

I've tried patching the LiveReload component to wait for 3 seconds before importing in case the server is not ready yet, but that's not the cause. I've also tried to dynamically import the module in browser console. It works only if I use different url origin from what I use to access the app in the browser. For example, if I use localhost:8788 on my browser then use 0.0.0.0:8788 it works.

Also seeing TypeError: error loading dynamically imported module:... with 3.15.0 causing HMR to fail.

@mrbbot Really appreciate the fix on the wrangler side last time. Given this seems to be a new issue in 3.15.0, do you think we need to open a new issue in https://github.com/cloudflare/workers-sdk/issues? Just want to make sure we collect the right info from the Remix side to make it a useful report.

[mrbbot]

@KrisBraun Hey! Yep, would you be able to open an issue in workers-sdk, linking to these last comments? That way we can get this into our GitHub project and prioritise. 👍

[KrisBraun]

Thanks. Logged as cloudflare/workers-sdk#4318.

[mrbbot]

For those following this thread, I've replied with more details here: cloudflare/workers-sdk#4318 (comment). TL;DR: we're working on a change that should fix this issue, but recommend you pin wrangler to a working version for the time being.

[BrandonNoad]

I believe this was resolved when wrangler@3.19.0 was released.