Cloudflare Workers RPC: TypeError: Fetch API cannot load

[boojum]

What version of Hono are you using?

4.2.3

What runtime/platform is your app running on?

Cloudflare Workers

What steps can reproduce the bug?

I was following RPC documentation on hono.dev, specifically trying to get custom fetch working with Cloudflare Workers. I created two workers - worker_a with the procedure and worker_b with binding to the latter. Unfortunately, communication results in TypeError: Fetch API cannot load.

Steps to reproduce:

1. Clone the example repo illustrating the issue: git clone https://gitlab.com/b00jum/hono-workers-rpc
2. Install both workers dependencies by cd'ing to their respective folders and running npm i
3. According to the Cloudflare docs worker with the binding must be on your Cloudflare account. cd to worker-b and run npm run deploy.
4. Start worker-a by executing npm start in its folder, worker starts just fine.
5. Start worker-b by executing npm start in its folder, worker starts just fine.
6. Execute curl http://localhost:3002 and observe Internal Server Error as well as error from worker-b:

$ npm start

> start
> wrangler dev src/index.ts

 ⛅️ wrangler 3.48.0
 -------------------
 ▲ [WARNING] This worker is bound to live services: hello (worker_a)


 Your worker has access to the following bindings:
 - Services:
   - hello: worker_a
 ▲ [WARNING] ⎔ Support for service bindings in local mode is experimental and may change.


 ⎔ Starting local server...
 ⎔ Reloading local server...
 ⎔ Reloading local server...
 [wrangler:inf] Ready on http://localhost:3002
 ✘ [ERROR] TypeError: Fetch API cannot load: /api/rpc?name=Hono

       at ClientRequestImpl.fetch
   (file:///home/user/rpc/worker-b/node_modules/hono/dist/client/client.js:96:27)
       at null.<anonymous>
   (file:///home/user/rpc/worker-b/node_modules/hono/dist/client/client.js:131:16)
       at Object.apply
   (file:///home/user/rpc/worker-b/node_modules/hono/dist/client/client.js:20:14)
       at Array.<anonymous> (file:///home/user/rpc/worker-b/src/index.ts:15:36)
       at Hono2.dispatch
   (file:///home/user/rpc/worker-b/node_modules/hono/dist/hono-base.js:175:37)
       at Hono2.fetch
   (file:///home/user/rpc/worker-b/node_modules/hono/dist/hono-base.js:201:17)
       at fetchDispatcher
   (file:///home/user/rpc/worker-b/.wrangler/tmp/bundle-wtRl3v/middleware-loader.entry.ts:56:17)
       at __facade_invokeChain__
   (file:///home/user/rpc/worker-b/node_modules/wrangler/templates/middleware/common.ts:53:9)
       at Object.next
   (file:///home/user/rpc/worker-b/node_modules/wrangler/templates/middleware/common.ts:50:11)
       at jsonError
   (file:///home/user/rpc/worker-b/node_modules/wrangler/templates/middleware/middleware-miniflare3-json-error.ts:22:30)


 [wrangler:inf] GET / 500 Internal Server Error (31ms)
 ╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
 │ [b] open a browser, [d] open Devtools, [l] turn off local mode, [c] clear console, [x] to exit                         │
 ╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

What is the expected behavior?

When executing curl http://localhost:3002 - a request to worker-b - I expected the said worker to execute RPC on worker-a under '/api/hellowith queryname?Hono. This should result in Hello via RPC Hono` being printed to the terminal.

What do you see instead?

No response

Additional information

While searching through the issue tracker I found #846 which reports the same error. It might be relevant as its happens when worker is bound to a Durable Object as well as D1.

[yusukebe]

Hi @boojum

How about specifying the base URL?

const url = new URL(c.req.url)
const baseUrl = `${url.protocol}//${url.hostname}`
const client = hc<AppType>(baseUrl, { fetch: c.env.hello.fetch.bind(c.env.hello) })
const res = await client.api.rpc.$get({ query: { name: 'Hono' } })