Issues with resend

(edited)

Hello!!

I'm trying to use Resend with my vercel.

My email at resend is verified:

My DNS is confirmed and valid

I have added enviorment variabels to vercel:

My domain in vercel is correct:

Current versus Expected behaviour

I keep getting 500 or 404 error when trying to send a email.

When navigation to the page i get this:

When checking the function file it shows green.

I'm really not sure what to do to make this work.

Code

This is in my api/email/route

1import { VercelRequest, VercelResponse } from "@vercel/node";2import axios from "axios";34const RESEND_API_KEY = process.env.RESEND_API_KEY;5const sendEmail = async (html: string, subject: string, to: string[]) => {6  try {7    const response = await axios.post(8      "https://api.resend.com/emails",9      {10        from: "Acme <onboarding@resend.dev>",11        to,12        subject,13        html,14      },15      {16        headers: {17          "Content-Type": "application/json",18          Authorization: `Bearer ${RESEND_API_KEY}`,19        },20      }21    );22    return response.data;23  } catch (error) {24    console.error("Email sending failed:", error.response?.data || error.message);25    throw new Error("Failed to send email");26  }27};2829// Main handler function30export default async function handler(req: VercelRequest, res: VercelResponse) {31  console.log("Request method:", req.method);32  console.log("Request body:", req.body);3334  if (req.method === "POST") {35    const { htmlContent, subject, recipients } = req.body;3637    if (!htmlContent || !subject || !recipients) {38      console.error("Missing required parameters:", { htmlContent, subject, recipients });39      return res.status(400).json({ error: "Missing required parameters" });40    }4142    try {43      const response = await sendEmail(htmlContent, subject, recipients);44      return res.status(200).json(response);45    } catch (error: unknown) {46      console.error("Error sending email:", error);47      const errorMessage = error instanceof Error ? error.message : "An unknown error occurred";48      return res.status(500).json({ error: errorMessage });49    }50  } else {51    return res.status(405).json({ error: "Method Not Allowed" });52  }53}

Project information (URL, framework, environment, project settings)

Frameworks / Libraries

Frontend Framework: React (react, react-dom, react-router-dom)
Build Tool: Vite (vite, @vitejs/plugin-react-swc)
Styling: Tailwind CSS (tailwindcss, tailwindcss-animate, @tailwindcss/vite, tailwind-merge)
Form Handling: Formik + Yup (formik, yup)
Internationalization: i18next (i18next, react-i18next, i18next-browser-languagedetector)
UI Primitives: Radix UI (@radix-ui/react-dialog, @radix-ui/react-tabs, etc.)
Animations: Framer Motion
Notifications: React Toastify
Icons: Lucide React
Typewriter effect: react-simple-typewriter
Utility Libraries: clsx, class-variance-authority, axios

🌐 Environment

TypeScript project (typescript, tsc -b used in build script)
Environment Variables: Uses dotenv
Node Backend Support: Minimal, with @vercel/node, likely for serverless functions or API routes

🛠 Project Settings

"type": "module": Indicates use of ECMAScript Modules
"private": true: Not intended for publishing to npm
"scripts":
- dev: Start dev server with Vite
- build: Type-check and build with Vite
- lint: Lint the project
- preview: Serve the build locally
- watch: Custom Tailwind CSS watch command

There's another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

https://community.vercel.com/t/debugging-404-errors/437

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

Vercel Staff

Hi , welcome to the Vercel Community!

Sorry that you're running into this issue. Have you checked the Vercel runtime logs? Can you share those here?

Does the code work correctly locally?

1[12:47:30.775] Cloning github.com/Christonn93/OnlinePortfolio (Branch: master, Commit: 7ade9ae)2[12:47:31.028] Cloning completed: 253.000ms3[12:47:32.396] Restored build cache from previous deployment (GfM83Gp9qhEFZSrLuwMjxJKtbsr5)4[12:47:32.523] Running build in Washington, D.C., USA (East) – iad15[12:47:32.864] Running "vercel build"6[12:47:33.231] Vercel CLI 41.5.07[12:47:33.913] Installing dependencies...8[12:47:35.164] npm warn deprecated @types/dotenv@8.2.3: This is a stub types definition. dotenv provides its own type definitions, so you do not need this installed.9[12:47:35.349] 10[12:47:35.349] added 2 packages in 1s11[12:47:35.350] 12[12:47:35.350] 85 packages are looking for funding13[12:47:35.350]   run `npm fund` for details14[12:47:35.386] Running "npm run build"15[12:47:36.320] 16[12:47:36.321] > online-portfolio@0.0.0 build17[12:47:36.321] > tsc -b && vite build18[12:47:36.321] 19[12:47:42.085] [36mvite v6.2.1 [32mbuilding for production...[36m[39m20[12:47:42.158] transforming...21[12:47:47.912] [32m✓[39m 2373 modules transformed.22[12:47:48.272] rendering chunks...23[12:47:48.524] computing gzip size...24[12:47:48.551] [2mdist/[22m[32mindex.html                         [39m[1m[2m  0.69 kB[22m[1m[22m[2m │ gzip:   0.39 kB[22m25[12:47:48.551] [2mdist/[22m[2massets/[22m[32mredgo-BTNHkO8n.png          [39m[1m[2m 69.82 kB[22m[1m[22m26[12:47:48.551] [2mdist/[22m[2massets/[22m[32mprofileImage-BnYelm8g.jpg   [39m[1m[2m 83.59 kB[22m[1m[22m27[12:47:48.552] [2mdist/[22m[2massets/[22m[35mindex-nZnMak2J.css          [39m[1m[2m 31.77 kB[22m[1m[22m[2m │ gzip:   6.51 kB[22m28[12:47:48.552] [2mdist/[22m[2massets/[22m[36mserver.browser-BYJNpaAM.js  [39m[1m[2m 70.60 kB[22m[1m[22m[2m │ gzip:  23.14 kB[22m29[12:47:48.552] [2mdist/[22m[2massets/[22m[36mindex-B5KdLrUE.js           [39m[1m[2m212.57 kB[22m[1m[22m[2m │ gzip:  70.10 kB[22m30[12:47:48.552] [2mdist/[22m[2massets/[22m[36mindex-DfJhhd06.js           [39m[1m[33m629.16 kB[39m[22m[2m │ gzip: 204.41 kB[22m31[12:47:48.552] [32m✓ built in 6.43s[39m32[12:47:48.553] [33m33[12:47:48.554] (!) Some chunks are larger than 500 kB after minification. Consider:34[12:47:48.557] - Using dynamic import() to code-split the application35[12:47:48.560] - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks36[12:47:48.560] - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.[39m37[12:47:48.878] Using TypeScript 5.7.3 (local user-provided)38[12:47:51.384] Build Completed in /vercel/output [17s]39[12:47:51.448] Deploying outputs...40[12:47:54.831] 41[12:47:55.143] Deployment completed42[12:48:09.360] Uploading build cache [88.59 MB]...43[12:48:11.406] Build cache uploaded: 2.046s

Vercel Alum

Hey your snippet above looks to be your build logs. If you attempt to invoke your email function, your Logs tab on the project's dashboard will display information about the function (and errors around it).

If you are on a Hobby account, your logs I think are only for the last hour, so that is why you'll have to try to invoke the function so you have fresh logs to view.

let me know what you find, happy to look further!

(edited)

This is the log I sendt in chat:

This is the summary:

Here is full screenshots:

Please, let me know what if there is any deeper I can go to give you more information regarding the deployment and build.

Vercel Staff

Hi , thanks for the information. But, I'd ask you to follow the comment from : https://community.vercel.com/t/issues-with-resend/8381/5

We need the runtime logs from your project, when you try sending an email:

Logs

I guess this is the correct logg you are asking for :)

Vercel Staff

Yes. That's the correct one. Can you try following this solution: https://community.vercel.com/t/deploying-typescript-serverless-functions/4029/3?

Of course I will :) Thanks. I will let you know how it will go.

reply to #8

Vercel Alum

this is exactly it, .

So that error is showing because your code is currently written in a ESModule syntax which requires a little configuration for node to recognize vs the CommonJS style of scripts.

Not knowing how your code it setup, but this should be relatively low effort to get working. Definitely would recoomend leveraging TypeScript as Anshuman has referred, but let me know if you can't get a solution deployed. Here to help!

Thanks :)

I will try to sort out the code later today. The code repo is this if you want to have a look :)
https://github.com/Christonn93/OnlinePortfolio

Vercel Alum

Taking a quick glance. I can see it is a combination of vite + an api route. I'm wondering if there is an issue with the setup between your typescript and your two separate apps (your vite site, and your api route).

This is actually a really good use-case for something like Next.js (not saying rewrite the app). But i'd suggest separating these and their configs more since Vite is building a client-side bundle where your API route is a node runtime bundle.

The api route is for the email service only, the site itself is actually just a static spa using react.

But maybe I will have a look at building it in next in version two :) Just need ro learn next

This topic is closed. It no longer accepts new replies.

Hello!!

I'm trying to use Resend with my vercel.

My email at resend is verified:

My DNS is confirmed and valid

I have added enviorment variabels to vercel:

My domain in vercel is correct:

Current versus Expected behaviour

I keep getting 500 or 404 error when trying to send a email.

When navigation to the page i get this:

When checking the function file it shows green.

I'm really not sure what to do to make this work.

Code

This is in my api/email/route

1import { VercelRequest, VercelResponse } from "@vercel/node";2import axios from "axios";34const RESEND_API_KEY = process.env.RESEND_API_KEY;5const sendEmail = async (html: string, subject: string, to: string[]) => {6  try {7    const response = await axios.post(8      "https://api.resend.com/emails",9      {10        from: "Acme <onboarding@resend.dev>",11        to,12        subject,13        html,14      },15      {16        headers: {17          "Content-Type": "application/json",18          Authorization: `Bearer ${RESEND_API_KEY}`,19        },20      }21    );22    return response.data;23  } catch (error) {24    console.error("Email sending failed:", error.response?.data || error.message);25    throw new Error("Failed to send email");26  }27};2829// Main handler function30export default async function handler(req: VercelRequest, res: VercelResponse) {31  console.log("Request method:", req.method);32  console.log("Request body:", req.body);3334  if (req.method === "POST") {35    const { htmlContent, subject, recipients } = req.body;3637    if (!htmlContent || !subject || !recipients) {38      console.error("Missing required parameters:", { htmlContent, subject, recipients });39      return res.status(400).json({ error: "Missing required parameters" });40    }4142    try {43      const response = await sendEmail(htmlContent, subject, recipients);44      return res.status(200).json(response);45    } catch (error: unknown) {46      console.error("Error sending email:", error);47      const errorMessage = error instanceof Error ? error.message : "An unknown error occurred";48      return res.status(500).json({ error: errorMessage });49    }50  } else {51    return res.status(405).json({ error: "Method Not Allowed" });52  }53}

Project information (URL, framework, environment, project settings)

Frameworks / Libraries

Frontend Framework: React (react, react-dom, react-router-dom)
Build Tool: Vite (vite, @vitejs/plugin-react-swc)
Styling: Tailwind CSS (tailwindcss, tailwindcss-animate, @tailwindcss/vite, tailwind-merge)
Form Handling: Formik + Yup (formik, yup)
Internationalization: i18next (i18next, react-i18next, i18next-browser-languagedetector)
UI Primitives: Radix UI (@radix-ui/react-dialog, @radix-ui/react-tabs, etc.)
Animations: Framer Motion
Notifications: React Toastify
Icons: Lucide React
Typewriter effect: react-simple-typewriter
Utility Libraries: clsx, class-variance-authority, axios

🌐 Environment

TypeScript project (typescript, tsc -b used in build script)
Environment Variables: Uses dotenv
Node Backend Support: Minimal, with @vercel/node, likely for serverless functions or API routes

🛠 Project Settings

"type": "module": Indicates use of ECMAScript Modules
"private": true: Not intended for publishing to npm
"scripts":
- dev: Start dev server with Vite
- build: Type-check and build with Vite
- lint: Lint the project
- preview: Serve the build locally
- watch: Custom Tailwind CSS watch command