Home › Articles

How to resolve Cloudflare Workers Sites deploy error in a Remix app

If you have a Cloudflare Workers Sites in Remix, there are high chance that you may have already or will face the following error on Cloudflare deployment:

The uploaded script has no registered event handlers. [code: 10068]

This error happens with wrangler v2 in the Remix app. It happens when any of the packages/dependencies in the Remix app has ESM export format. When it all gets bundled with the worker script then wrangler's guessing the worker format does not work quite accurately.

Here is what it says about the guessing worker format in the wrangler code in node_modules/wrangler/src/entry.ts:

/**
 * A function to "guess" the type of worker.
 * We do this by running a lightweight build of the actual script,
 * and looking at the metafile generated by esbuild. If it has a default
 * export (or really, any exports), that means it's a "modules" worker.
 * Else, it's a "service-worker" worker. This seems hacky, but works remarkably
 * well in practice.
 */
export default async function guessWorkerFormat(
...

There is already an issue and a pull request for this at the wrangler GitHub repository.

Meanwhile, to get our apps working, we can fix the issue using a custom patch. Here are the steps to patch the wrangler to make it work as expected in two parts.

Part 1

Part 1 is only needed once since it's just the setup.

  • Install patch-package—an extremely useful package to patch broken node modules.
npm install patch-package
  • Now go to node_modules/wrangler/src/entry.ts and replace all entries for:
format: 'esm';

with

format: hint === 'service-worker' ? 'cjs' : 'esm';
  • Now go to node_modules/wrangler/wrangler-dist/cli.js and repeat the above step and replace all entries for:
format: 'esm';

with

format: hint === 'service-worker' ? 'cjs' : 'esm';
  • Save the files
  • Go to the root of the app in the CLI
  • Run the following and wait for it to finish creating the patch
node_modules/.bin/patch-package wrangler

This will create a patch file in patches/warngler+{version}.patch. It will look something like the following:

Do not copy the following code. It is incomplete and for reference only.

diff --git a/node_modules/wrangler/src/entry.ts b/node_modules/wrangler/src/entry.ts
index 3ee1afe..585cb84 100644
--- a/node_modules/wrangler/src/entry.ts
+++ b/node_modules/wrangler/src/entry.ts
@@ -151,7 +151,7 @@ export default async function guessWorkerFormat(
 		absWorkingDir: entryWorkingDirectory,
 		metafile: true,
 		bundle: false,
-		format: "esm",
+		format: hint === "service-worker" ? "cjs" : "esm",
 		target: "es2020",
 		write: false,
 		loader: {
diff --git a/node_modules/wrangler/wrangler-dist/cli.js b/node_modules/wrangler/wrangler-dist/cli.js
index 622e617..0090fbd 100644
--- a/node_modules/wrangler/wrangler-dist/cli.js
+++ b/node_modules/wrangler/wrangler-dist/cli.js
@@ -121579,7 +121579,7 @@ async function guessWorkerFormat(entryFile, entryWorkingDirectory, hint, tsconfi
     absWorkingDir: entryWorkingDirectory,
     metafile: true,
     bundle: false,
-    format: "esm",
+    format: hint === "service-worker" ? "cjs" : "esm",
     target: "es2020",
     write: false,
     loader: {
...

Part 2

  • Now add the following script in package.json:
"scripts": {
  "postinstall": "patch-package"
  ...
}

This will ensure that wrangler is always patched correctly after each npm install.

References

More articles