Hono•12mo ago•

32 replies

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

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]

.

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) => {}

because when I export

app

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 }

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);
    },
};

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.

Hono•12mo ago•

32 replies

Shaun

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

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]

.

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) => {}

because when I export

app

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 }

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);
    },
};

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.

Failed deploy with Hono, Vite and email event handler

Failed deploy with Hono, Vite and email event handler

Similar Threads

Similar Threads

Similar Threads