hono cloudflare pages + vite dev server fails to load Worker

[benjamine]

Steps to Reproduce:

1. follow the guide at https://hono.dev/docs/getting-started/cloudflare-pages
2. at /src/client.ts add code loading a Worker (according to vite docs) as:

console.log("loading client.ts")

const worker = new Worker(new URL('./worker.ts', import.meta.url), {
    type: 'module',
  });

3. add a /src/worker.ts:

console.log("worker is running");

self.onmessage = (event) => {
  console.log("message from App:", event.data);
};

4. start the vite dev server and open home page.

The worker never loads, as the server responds with a 404 when trying to load the worker module:

Note:

• http://localhost:5173/src/worker.ts?worker_file&type=module fails with 404
• http://localhost:5173/src/worker.ts serves the source code successfully
• using import with ?worker also fails with a 404 in the same way
• the same example using a Worker works fine in a vite react starter example.

Dependencies:

  "dependencies": {
    "@hono/vite-cloudflare-pages": "^0.4.2",
    "hono": "^4.6.3"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20240529.0",
    "@hono/vite-build": "^1.0.0",
    "@hono/vite-dev-server": "^0.15.1",
    "vite": "^5.2.12",
    "wrangler": "^3.57.2"
  }

[benjamine]

my-app.zip

uploading a zipped version of example project to help reproduce (used bun as package manager, use bun i and bun run dev to test).

[yusukebe]

Hi @benjamine

Set up the exclude option of the dev server.

devServer({
  exclude: [/^\/src\/worker.ts/, ...defaultOptions.exclude], // <===
  entry: 'src/index.tsx'
})

[benjamine]

@yusukebe you're my hero! 🙌 that worked.

you probably already figured this out, but I'm guessing an official patch would be adding something like \/\?worker/ (catch both ?worker and ?worker_file), or just allow any querystring after .ts/.tsx files.
at

vite-plugins/packages/dev-server/src/dev-server.ts

Lines 50 to 59 in ae89388

	exclude: [
	/.*\.css$/,
	/.*\.ts$/,
	/.*\.tsx$/,
	/^\/@.+$/,
	/\?t\=\d+$/,
	/^\/favicon\.ico$/,
	/^\/static\/.+/,
	/^\/node_modules\/.*/,
	],

I'll keep it in my vite config for now 👍

心から感謝しています。

[yusukebe]

@benjamine

Good! Can we close this issue?

[benjamine]

I'd suggest patching that regex list for any others trying to use web workers too, vite has a couple query strings like those.

(happy to make a separate PR for that if you think it makes sense)

Otherwise this can be closed 👍

[yusukebe]

I'd suggest patching that regex list for any others trying to use web workers too, vite has a couple query strings like those.

I think it's not necessary to modify vite-plugins/packages/dev-server/src/dev-server.ts because users can change the value themselves. I made it an option for the purpose.

[benjamine]

closed 👍,

ps: I'd still suggest maybe a mention in docs at least? or throw a more explicit error?

as this behavior would also confuse anyone else trying to use a web worker the way vite recommends.

[yusukebe]

PS: I'd still suggest maybe a mention in the docs at least or throwing a more explicit error.

There is a description of the exclude option here currently:

https://github.com/honojs/vite-plugins/tree/main/packages/dev-server#exclude

But, as you did not realize, it is not friendly. Is it good to add this page? https://hono.dev/docs/getting-started/cloudflare-pages

I don't want to make it an error, but adding docs is good!