Hono•2w 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 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.

Fiberplane

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

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

11 Replies

ambergristle•2w ago

hey! discord supports markdown codeblock syntax highlighting. just add the language after the opening backticks! it makes it much easier to scan snippets as a side-note, it's probably worth applying the jsxRenderer middleware only to routes/endpoints that use it 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? i'd also recommend the official hono docs/readmes as a primary reference https://github.com/honojs/vite-plugins https://hono.dev/docs/guides/jsx-dom

ShaunOP•2w ago

@ambergristle Thank you for your answer! I read the documentation but couldn't find the way to go from the cloudflare-workers starter using yarn 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-workers started I got the same error when using 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

ambergristle•2w ago

sorry to hear you're still having issues, and thanks for setting up the repo! i'm looking into it now i did notice that there appears to be a redundancy in your script vite build --mode client && vite build && wrangler deploy --no-bundle or is that to build the client + server separately?

ShaunOP•2w ago

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. The thing I would like to achieve is to have a single command to deploy both the frontend and the email worker. Important to mention is that yarn dev and yarn build works like it should, but when running yarn 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•2w ago

yeah, i can repro the error this is the failing code: https://github.com/honojs/hono/blob/a2ec84866b21fe830d88ebb5f69e32b3bdfe71fc/src/hono-base.ts#L212 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]

(index.js:1:20275) not sure yet why that's breaking @Shaun to streamline troubleshooting a bit, you can also run wrangler dev ./dist/index.js

ShaunOP•2w ago

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}, right?

ambergristle•2w ago

i actually just came across this issue that seems relevent: https://github.com/honojs/vite-plugins/issues/214 also maybe - https://github.com/honojs/vite-plugins/issues/21 - https://github.com/honojs/vite-plugins/issues/190 nothing really authoritative from the mainters though, so idk @Aditya Mathur, do you have a take on this? @Shaun you could also check out this repo: https://github.com/Alwurts/honc-slide-generator it uses a somewhat different approach + plugin, but may be a workaround

Aditya Mathur•7d ago

That's a nice find!

ambergristle•7d ago

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

ShaunOP•7d ago

@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.

ambergristle•7d ago

No problem! Thanks for opening an issue

Gaming

Programming

Failed deploy with Hono, Vite and email event handler

Did you find this page helpful?