Shaun Posts - Answer Overflow

Shaun

•Created by Shaun on 2/22/2025 in #help

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 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]

. I already figured out that the problem lies with export default { fetch: app.fetch, email: async (message, env) => {} because when I export app like export default app the error does not occur. When I use export default { fetch: app.fetch } the error will occur. My entrypoint (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);
    },
};

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

33 replies

Gaming

Programming