Cannot use Cloudflare Durable Objects with Hono and Vite

[jhlabs]

I am trying to setup Hono with Vite and Cloudflare Durable Objects. I have cloned the Durable Objects example and added the Vite Dev Server from this repository according to the instructions. Here is a repository for this setup https://github.com/jhlabs/hono-vite-durable-objects.

When I run vite to start the dev server (same is true for build with vite) I get the following error:

[vite] Pre-transform error: Failed to load url cloudflare:workers (resolved id: cloudflare:workers) in /Users/johannes/dev/hono-vite-durable-objects/src/counter.ts. Does the file exist?
10:39:14 AM [vite] Error when evaluating SSR module /src/counter.ts: failed to import "cloudflare:workers"
|- Error: Cannot find module 'cloudflare:workers' imported from '/Users/johannes/dev/hono-vite-durable-objects/src/counter.ts'
    at nodeImport (file:///Users/johannes/dev/hono-vite-durable-objects/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53047:19)
    at ssrImport (file:///Users/johannes/dev/hono-vite-durable-objects/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:22)
    at eval (/Users/johannes/dev/hono-vite-durable-objects/src/counter.ts:3:50)
    at instantiateModule (file:///Users/johannes/dev/hono-vite-durable-objects/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:11)

10:39:14 AM [vite] Error when evaluating SSR module ./src/index.ts: failed to import "cloudflare:workers"
|- Error: Cannot find module 'cloudflare:workers' imported from '/Users/johannes/dev/hono-vite-durable-objects/src/counter.ts'
    at nodeImport (file:///Users/johannes/dev/hono-vite-durable-objects/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53047:19)
    at ssrImport (file:///Users/johannes/dev/hono-vite-durable-objects/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:22)
    at eval (/Users/johannes/dev/hono-vite-durable-objects/src/counter.ts:3:50)
    at instantiateModule (file:///Users/johannes/dev/hono-vite-durable-objects/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:11)

10:39:14 AM [vite] Internal server error: Cannot find module 'cloudflare:workers' imported from '/Users/johannes/dev/hono-vite-durable-objects/src/counter.ts'
      at nodeImport (file:///Users/johannes/dev/hono-vite-durable-objects/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53047:19)
      at ssrImport (file:///Users/johannes/dev/hono-vite-durable-objects/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:22)
      at eval (/Users/johannes/dev/hono-vite-durable-objects/src/counter.ts:3:50)
      at instantiateModule (file:///Users/johannes/dev/hono-vite-durable-objects/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:11)

I suspect that the cloudflare:workers import should be excluded from being bundled by vite, as this is later resolved by the wrangler runtime. However, I could not get this to work and would expect this Vite Plugin to support this feature out of the box.

Thanks for your help in resolving this!

[jhlabs]

@yusukebe any idea how this could be resolved?

[jmorrell]

This is also an issue with Workflows

[yusukebe]

This is not 100% Hono-matter, but it is a problem to use the custom namespace cloudflare:workers within Vite. I can't find any solution now.

[jhlabs]

I am able to get around the vite error by excluding it from the bundle like so:

// vite.config.ts
import build from "@hono/vite-build/cloudflare-workers";
import devServer from "@hono/vite-dev-server";
import cloudflareAdapter from "@hono/vite-dev-server/cloudflare";
import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {
	if (mode === "client") {
		return {
			build: {
				rollupOptions: {
          external: ["cloudflare:workers"],          
					input: ["./src/client.ts"],
					output: {
						entryFileNames: "static/client.js",
						chunkFileNames: "static/assets/[name]-[hash].js",
						assetFileNames: "static/assets/[name].[ext]",
					},
				},
				emptyOutDir: false,
				copyPublicDir: false,
			},
		};
	}

	return {
		build: {
			minify: true,
			rollupOptions: {
				output: {
					entryFileNames: "_worker.js",
				},
				external: ["cloudflare:workers"],
			},
		},
		plugins: [
			devServer({
				adapter: cloudflareAdapter,
				entry: "./src/index.tsx",
			}),
			build(),
		],
	};
});

However, I then get a new error:

service core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER: Worker "core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER"'s binding "UserActor" refers to a service "core:user:worker", but no such service is defined.
8:49:10 AM [vite] Internal server error: The Workers runtime failed to start. There is likely additional logging output above.
      at #assembleAndUpdateConfig (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:9980:13)
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
      at async Mutex.runWith (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:3632:16)
      at async #waitForReady (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:10037:5)
      at async Miniflare2._getProxyClient (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:10161:5)
      at async Miniflare2.getBindings (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:10180:25)
      at async getPlatformProxy (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/wrangler/wrangler-dist/cli.js:217062:20)
      at async cloudflareAdapter (file:///Users/johannes/dev/sublime-workers/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_/node_modules/@hono/vite-dev-server/dist/adapter/cloudflare.js:6:13)
      at async getAdapterFromOptions (file:///Users/johannes/dev/sublime-workers/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_/node_modules/@hono/vite-dev-server/dist/dev-server.js:132:15)
      at async getRequestListener.overrideGlobalObjects (file:///Users/johannes/dev/sublime-workers/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_/node_modules/@hono/vite-dev-server/dist/dev-server.js:68:31)
service core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER: Worker "core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER"'s binding "UserActor" refers to a service "core:user:worker", but no such service is defined.
8:49:15 AM [vite] Internal server error: The Workers runtime failed to start. There is likely additional logging output above.
      at #assembleAndUpdateConfig (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:9980:13)
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
      at async Mutex.runWith (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:3632:16)
      at async #waitForReady (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:10037:5)
      at async Miniflare2._getProxyClient (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:10161:5)
      at async Miniflare2.getBindings (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:10180:25)
      at async getPlatformProxy (/Users/johannes/dev/sublime-workers/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/wrangler/wrangler-dist/cli.js:217062:20)
      at async cloudflareAdapter (file:///Users/johannes/dev/sublime-workers/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_/node_modules/@hono/vite-dev-server/dist/adapter/cloudflare.js:6:13)
      at async getAdapterFromOptions (file:///Users/johannes/dev/sublime-workers/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_/node_modules/@hono/vite-dev-server/dist/dev-server.js:132:15)
      at async getRequestListener.overrideGlobalObjects (file:///Users/johannes/dev/sublime-workers/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_/node_modules/@hono/vite-dev-server/dist/dev-server.js:68:31)

[Code-Hex]

Same issue: #24 (comment)

[Code-Hex]

This comment is very helpful to me.
I just added script_name = "worker-name" to my wrangler.toml, then I confirmed to work it.
cloudflare/workers-sdk#6988 (comment)