Hono•11mo ago

Failed deploy with Hono, Vite and email event handler

I'm building a email disposable service with Cloudflare workers. When I deploy using

vite build --mode client && vite build && wrangler deploy --no-bundle

vite build --mode client && vite build && wrangler deploy --no-bundle

vite build --mode client && vite build && wrangler deploy --no-bundle

vite build --mode client && vite build && wrangler deploy --no-bundle I get the error:

A request to the Cloudflare API (/accounts/xxx/workers/scripts/disposible-email/versions) failed. Uncaught TypeError: Cannot read properties of undefined (reading 'map') at null.<anonymous> (index.js:1:21247) in route  [code: 10021]

A request to the Cloudflare API (/accounts/xxx/workers/scripts/disposible-email/versions) failed. Uncaught TypeError: Cannot read properties of undefined (reading 'map') at null.<anonymous> (index.js:1:21247) in route  [code: 10021]

A request to the Cloudflare API (/accounts/xxx/workers/scripts/disposible-email/versions) failed. Uncaught TypeError: Cannot read properties of undefined (reading 'map') at null.<anonymous> (index.js:1:21247) in route  [code: 10021]

A request to the Cloudflare API (/accounts/xxx/workers/scripts/disposible-email/versions) failed. Uncaught TypeError: Cannot read properties of undefined (reading 'map') at null.<anonymous> (index.js:1:21247) in route  [code: 10021]

.

I already figured out that the problem lies with

export default { fetch: app.fetch, email: async (message, env) => {}

export default { fetch: app.fetch, email: async (message, env) => {}

export default { fetch: app.fetch, email: async (message, env) => {}

export default { fetch: app.fetch, email: async (message, env) => {} because when I export

app

app

export default app

export default app

export default app

export default app the error does not occur. When I use

export default { fetch: app.fetch }

export default { fetch: app.fetch }

export default { fetch: app.fetch }

export default { fetch: app.fetch } the error will occur.

My entrypoint (

index.tsx

index.tsx

) looks like this:

import { Hono } from 'hono';
import { jsxRenderer } from 'hono/jsx-renderer';

import { Dashboard } from './client/Dashboard';
import { createAddress, getAddress } from './api';
import { handleEmail } from './email';

const app = new Hono();

app.use(
    jsxRenderer(
        ({ children }) => (
            <html lang="en">
                <head>
                    <meta charSet="utf-8" />
                    <meta content="width=device-width, initial-scale=1" name="viewport" />
                    <title>Disposable email</title>
                    <script type="module" src={import.meta.env.PROD ? '/assets/index.js' : '/src/client/index.tsx'} />
                </head>
                <div id="root">{children}</div>
            </html>
        ),
        { docType: true }
    )
);

app.get('/', (c) => c.render(<Dashboard />));

app.get('/api/mailbox/:address', getAddress);
app.post('/api/mailbox', createAddress);

export default {
    fetch: app.fetch,
    email: async (message: ForwardableEmailMessage, env: Env) => {
        handleEmail(message, env);
    },
};

import { Hono } from 'hono';
import { jsxRenderer } from 'hono/jsx-renderer';

import { Dashboard } from './client/Dashboard';
import { createAddress, getAddress } from './api';
import { handleEmail } from './email';

const app = new Hono();

app.use(
    jsxRenderer(
        ({ children }) => (
            <html lang="en">
                <head>
                    <meta charSet="utf-8" />
                    <meta content="width=device-width, initial-scale=1" name="viewport" />
                    <title>Disposable email</title>
                    <script type="module" src={import.meta.env.PROD ? '/assets/index.js' : '/src/client/index.tsx'} />
                </head>
                <div id="root">{children}</div>
            </html>
        ),
        { docType: true }
    )
);

app.get('/', (c) => c.render(<Dashboard />));

app.get('/api/mailbox/:address', getAddress);
app.post('/api/mailbox', createAddress);

export default {
    fetch: app.fetch,
    email: async (message: ForwardableEmailMessage, env: Env) => {
        handleEmail(message, env);
    },
};

import { Hono } from 'hono';
import { jsxRenderer } from 'hono/jsx-renderer';

import { Dashboard } from './client/Dashboard';
import { createAddress, getAddress } from './api';
import { handleEmail } from './email';

const app = new Hono();

app.use(
    jsxRenderer(
        ({ children }) => (
            <html lang="en">
                <head>
                    <meta charSet="utf-8" />
                    <meta content="width=device-width, initial-scale=1" name="viewport" />
                    <title>Disposable email</title>
                    <script type="module" src={import.meta.env.PROD ? '/assets/index.js' : '/src/client/index.tsx'} />
                </head>
                <div id="root">{children}</div>
            </html>
        ),
        { docType: true }
    )
);

app.get('/', (c) => c.render(<Dashboard />));

app.get('/api/mailbox/:address', getAddress);
app.post('/api/mailbox', createAddress);

export default {
    fetch: app.fetch,
    email: async (message: ForwardableEmailMessage, env: Env) => {
        handleEmail(message, env);
    },
};

import { Hono } from 'hono';
import { jsxRenderer } from 'hono/jsx-renderer';

import { Dashboard } from './client/Dashboard';
import { createAddress, getAddress } from './api';
import { handleEmail } from './email';

const app = new Hono();

app.use(
    jsxRenderer(
        ({ children }) => (
            <html lang="en">
                <head>
                    <meta charSet="utf-8" />
                    <meta content="width=device-width, initial-scale=1" name="viewport" />
                    <title>Disposable email</title>
                    <script type="module" src={import.meta.env.PROD ? '/assets/index.js' : '/src/client/index.tsx'} />
                </head>
                <div id="root">{children}</div>
            </html>
        ),
        { docType: true }
    )
);

app.get('/', (c) => c.render(<Dashboard />));

app.get('/api/mailbox/:address', getAddress);
app.post('/api/mailbox', createAddress);

export default {
    fetch: app.fetch,
    email: async (message: ForwardableEmailMessage, env: Env) => {
        handleEmail(message, env);
    },
};

I used https://fiberplane.com/blog/client-side-guide/ to setup the project.

Fiberplane

Step-by-step guide: Adding client-side logic to your Hono app

A guide to adding client-side logic to your Hono app.

ambergristle•2/22/25, 9:49 AM

hey! discord supports markdown codeblock syntax highlighting. just add the language after the opening backticks!

ambergristle•2/22/25, 9:49 AM

it makes it much easier to scan snippets

ambergristle•2/22/25, 9:50 AM

as a side-note, it's probably worth applying the jsxRendererjsxRenderer middleware only to routes/endpoints that use it

ambergristle•2/22/25, 9:52 AM

just to confirm, when you use

export default { 
  fetch: app.fetch,
  // no email override
}

export default { 
  fetch: app.fetch,
  // no email override
}

you get the error?

ambergristle•2/22/25, 11:33 AM

i'd also recommend the official hono docs/readmes as a primary reference

ambergristle•2/22/25, 11:34 AM

https://github.com/honojs/vite-plugins

ambergristle•2/22/25, 11:34 AM

https://hono.dev/docs/guides/jsx-dom

ShaunOP•2/24/25, 12:40 PM

@ambergristle Thank you for your answer! I read the documentation but couldn't find the way to go from the cloudflare-workerscloudflare-workers starter using yarn create honoyarn create hono to a way to use the client components. What I did found was https://github.com/honojs/examples/tree/main/hono-vite-jsx mentioned on the vite-plugins repo you send. Using the code with the cloudflare-workerscloudflare-workers started I got the same error when using

export default { fetch: app.fetch }

export default { fetch: app.fetch }

.

I uploaded the code to a repo: https://github.com/shaunjanssens/hono-tsx

Can you please check what I'm doing wrong? Thank you!

GitHub

examples/hono-vite-jsx at main · honojs/examples

Examples using Hono. Contribute to honojs/examples development by creating an account on GitHub.

GitHub

GitHub - shaunjanssens/hono-tsx: Support example using Hono, client...

Support example using Hono, client components and Cloudflare workers - shaunjanssens/hono-tsx

SShaun @ambergristle Thank you for your answer! I read the documentation but couldn't f...

ambergristle•2/24/25, 2:02 PM

sorry to hear you're still having issues, and thanks for setting up the repo!

ambergristle•2/24/25, 2:02 PM

i'm looking into it now

ambergristle•2/24/25, 2:02 PM

i did notice that there appears to be a redundancy in your script

vite build --mode client && vite build && wrangler deploy --no-bundle

vite build --mode client && vite build && wrangler deploy --no-bundle

ambergristle•2/24/25, 2:02 PM

or is that to build the client + server separately?

ShaunOP•2/24/25, 2:04 PM

I honnestly don't have any idea, I suppose I just tried multiple things. The repo I shared now has the dev and build command I copied from the example and I added the deploy command with Wrangler.

ShaunOP•2/24/25, 2:05 PM

The thing I would like to achieve is to have a single command to deploy both the frontend and the email worker.

ShaunOP•2/24/25, 2:09 PM

Important to mention is that

yarn dev

yarn dev

and

yarn build

yarn build

works like it should, but when running yarn deployyarn deploy I get the error:

 ⛅️ wrangler 3.109.3
--------------------

🌀 Building list of assets...
🌀 Starting asset upload...
No files to upload. Proceeding with deployment...
Total Upload: 44.39 KiB / gzip: 16.68 KiB
No bindings found.

✘ [ERROR] A request to the Cloudflare API (/accounts/***/workers/scripts/test/versions) failed.

  Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at null.<anonymous> (file:///Users/shaunjanssens/Desktop/hono-tsx/dist/index.js:1:20275) in
  route
    at null.<anonymous> (file:///Users/shaunjanssens/Desktop/hono-tsx/dist/index.js:1:31178)
   [code: 10021]

  
  If you think this is a bug, please open an issue at:
  https://github.com/cloudflare/workers-sdk/issues/new/choose


error Command failed with exit code 1.

 ⛅️ wrangler 3.109.3
--------------------

🌀 Building list of assets...
🌀 Starting asset upload...
No files to upload. Proceeding with deployment...
Total Upload: 44.39 KiB / gzip: 16.68 KiB
No bindings found.

✘ [ERROR] A request to the Cloudflare API (/accounts/***/workers/scripts/test/versions) failed.

  Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at null.<anonymous> (file:///Users/shaunjanssens/Desktop/hono-tsx/dist/index.js:1:20275) in
  route
    at null.<anonymous> (file:///Users/shaunjanssens/Desktop/hono-tsx/dist/index.js:1:31178)
   [code: 10021]

  
  If you think this is a bug, please open an issue at:
  https://github.com/cloudflare/workers-sdk/issues/new/choose


error Command failed with exit code 1.

ambergristle•2/24/25, 2:13 PM

yeah, i can repro the error

ambergristle•2/24/25, 2:13 PM

this is the failing code: https://github.com/honojs/hono/blob/a2ec84866b21fe830d88ebb5f69e32b3bdfe71fc/src/hono-base.ts#L212

ambergristle•2/24/25, 2:13 PM

the error tells you where to look in the built app:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at null.<anonymous> (index.js:1:20275) in route
    at null.<anonymous> (index.js:1:31178)
   [code: 10021]

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at null.<anonymous> (index.js:1:20275) in route
    at null.<anonymous> (index.js:1:31178)
   [code: 10021]

ambergristle•2/24/25, 2:14 PM

(index.js:1:20275index.js:1:20275)

ambergristle•2/24/25, 2:14 PM

not sure yet why that's breaking

ambergristle•2/24/25, 2:28 PM

@Shaun to streamline troubleshooting a bit, you can also run wrangler dev ./dist/index.jswrangler dev ./dist/index.js

ShaunOP•2/24/25, 2:33 PM

That's handy indeed! Is there anything else I can try? I can't be the only person that tried to use client components with Vite and export default { fetch: app.fetch}export default { fetch: app.fetch}, right?

SShaun That's handy indeed! Is there anything else I can try? I can't be the only perso...

ambergristle•2/24/25, 2:37 PM

i actually just came across this issue that seems relevent: https://github.com/honojs/vite-plugins/issues/214

ambergristle•2/24/25, 2:41 PM

also maybe

ambergristle•2/24/25, 2:43 PM

nothing really authoritative from the mainters though, so idk

ambergristle•2/24/25, 2:46 PM

@Aditya Mathur, do you have a take on this?

ambergristle•2/24/25, 4:34 PM

@Shaun you could also check out this repo: https://github.com/Alwurts/honc-slide-generator

ambergristle•2/24/25, 4:35 PM

it uses a somewhat different approach + plugin, but may be a workaround

Aambergristle @Shaun you could also check out this repo: https://github.com/Alwurts/honc-slide...

Aditya Mathur•2/25/25, 4:30 AM

That's a nice find!

AAditya Mathur That's a nice find!

ambergristle•2/25/25, 6:41 AM

i reached out to @Nlea and @boots. they're my go-tos for cloudflare+hono questions

ShaunOP•2/25/25, 1:06 PM

@ambergristle I also created an issue on Github (https://github.com/honojs/hono/issues/3955). For now I will just use two projects. One for the email worker and one for the front-end. That prevents using workarounds and will be easier to combine them when a proper fix is created. Thank you very much for all the help!

GitHub

Issues · honojs/hono

Web framework built on Web Standards. Contribute to honojs/hono development by creating an account on GitHub.

SShaun @ambergristle I also created an issue on Github (https://github.com/honojs/hono/...

ambergristle•2/25/25, 2:07 PM

No problem! Thanks for opening an issue

Failed deploy with Hono, Vite and email event handler

Similar Threads

Similar Threads

Similar Threads