Sending E-mails with Hono

[Puton1221]

I am using Resend to create a web page that will send an email when accessing Hono.
I created it with bun create hono@latest mail-test and used the cloudflare pages template.
And I wrote the following code.

import { Hono } from "hono";
import { env } from "hono/adapter";
import { Resend } from "resend";

const app = new Hono();

app.get("/", (c) => {
  const { mailAPI } = env(c);
  const resend = new Resend(`${mailAPI}`);
  return c.text("Successfully loaded!");
});

export default app;.

I've been getting errors for a while now, so I made it so that ``new Resend(${mailAPI}}` can display "Successfully loaded!" if it succeeds.

I have tested it using vite.
Then I got the following error.

10:17:14 [vite] Internal server error: require is not defined
      at eval (C:/Users/puton/Desktop/mail-tester/node_modules/react-dom/server.node.js:11:3)
      at instantiateModule (file:///C:/Users/puton/Desktop/mail-tester/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

I am having trouble finding much information on the error in detail.
Is there any solution?

[NicoPlyley]

Hi @Puton1221,

Try this code instead

import { Hono } from "hono";
import { env } from "hono/adapter";
import { Resend } from "resend";

const app = new Hono<{ Variables: Resend }>(); // I'm not sure of the type, update accordingly

app.use((c) => {
   const { mailAPI } = env(c);
  const resend = new Resend(mailAPI);
  c.set('resend', resend);
});

app.get("/", (c) => {
  const resend = c.get('resend');
  const { data, error } = await resend.emails.send({
    from: 'Acme <[email protected]>',
    to: ['[email protected]'],
    subject: 'Hello World',
    html: '<strong>It works!</strong>',
  });
 
  return c.text("Successfully sent!");
});

export default app

Check this for more info with cf workers and how to use JSX to style the email
https://resend.com/docs/send-with-cloudflare-workers

[NicoPlyley]

It looks like you have to allow cjs in Vite. Take a look at this link here and see how they fixed it

https://stackoverflow.com/questions/77421447/how-to-solve-require-is-not-defined-in-vite

[Puton1221]

Added commonjsOptions: { transformMixedEsModules: true }. However, I still get errors.
I uploaded the file to GitHub so you can actually see it.

https://github.com/Puton1221/email-test

[NicoPlyley]

Honestly I'm not sure why because it work running wrangler. I'm not sure how vite handler this. You can try and use the api only and make a fetch request https://resend.com/docs/api-reference/introduction#how-do-you-handle-api-versioning if you look in their source code too it can help you figure out how they send it

[Puton1221]

I ended up using cloudflare workers to POST json data to handle this.

In this case, I would need to make the key mandatory in the POST data to prevent it from being used externally.

Thanks for your responding.

[NicoPlyley]

No problem, I'm sorry we couldn't find a solution with what I recommended, I am not too familiar with Vite outside of how frameworks that use it in the background

[6km]

Hi @Puton1221. Please try my solution.

Install vite-plugin-commonjs

npm install @originjs/vite-plugin-commonjs --save-dev

Use the plugin in your Vite config

import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs'

export default {
  plugins: [
    optimizeDeps: {
      esbuildOptions: {
        plugins:[
          esbuildCommonjs(['resend'])
        ]
      }
    }
  ]
}

[Puton1221]

I tried it.
However, I got the same error.