Email with Resend in the backend using a React Email Template

(edited)

Okay, hey guys,

I'm having a bit of an issue here. I'm using Vite, React, Node. What I'm trying to do:

vercel receives form information after submit in backend
stuff gets sanitized etc
if okay send form values structured using my template with Resend

The issue is is that the template is a .tsx (because it uses react email components) file, which cannot be rendered by the backend. It's not found as template.js if I put it somewhere in the api dir. So I figured, well, Vite will render it if I put it in the root > lib/templates/formmailtemplate.tsx which should be shared?

api ├── config │ └── email.ts ├── contact.ts ├── controllers │ └── contactController.ts ├── middleware │ └── validation.ts ├── models │ └── Contact.ts ├── services │ └── emailService.ts └── utils ├── sanitization.ts └── spamDetection.ts lib └── ContactEmailTemplate.tsx

so I have

import ContactEmail from '../../lib/ContactEmailTemplate in api/services/mailservice.ts which should then send the email with this function:

const resendClient = initializeResend();

// RENDER REACT COMPONENT TO HTML. 
const emailHtml = await render(
  ContactEmail({
    name: [contactData.name](https://contactdata.name),
    email: [contactData.email](https://contactdata.email),
    phone: [contactData.phone](https://contactdata.phone),
    message: contactData.message,
    submittedAt: formatSubmissionTime(),
  })
);

// PREPARE EMAIL DATA
const emailData = {
  from: EMAIL_CONFIG.from,
  to: EMAIL_CONFIG.to,
  subject: EMAIL_CONFIG.subject([contactData.name](https://contactdata.name)),
  html: emailHtml
};

// SEND EMAIL.

const result = await resendClient.emails.send(emailData);

However, Vercel is logging me this error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/lib/ContactEmail'

Is my path wrong or is it just my logic and is it impossible to use a react mail template in the backend? I'd really appreciate any help!

Vercel Staff

Using .tsx is correct and if that's not working then the issue is in your vite configuration which needs to be able to pre-process the tsx files

With the React Router vite plugin you get this out of the box, otherwise you may need to add an extra entrypoint to your vite config to get it to compile them to regular ts

hey jacob,

currently I've got the ContactEmailTemplate.tsx in a mails folder which is in the 'root', next to the 'api' folder and the 'src' folder. I've added "include": ["src", "emails", "api"] to my tsconfig.json and trying to import from api/services/emailService.ts like so:

import ContactEmail from '../../mails/ContactEmailTemplate.js';

however, Vercel still can't find it from the backend.

Vercel Staff

This isn't related to the tsconfig at all, you'll need to get Vite to compile your tsx files into js files that become Vercel functions.

You could do this with a prebuild step that you run on your server-side tsx files to compile them into the same locations (with .js extension instead of .tsx) and then delete the tsx, which should make the imports line up properly

I strongly recommend using a framework with bundling support built in as it takes a lot of legwork away from you.

If you want to do it yourself the same way the frameworks do, here are the full docs on the file structure to compile to

https://vercel.com/docs/build-output-api/primitives#serverless-function-configuration

vercel.com

Vercel Primitives

Learn about the Vercel platform primitives and how they work together to create a Vercel Deployment.

hey Jacob,

thanks for all the time you put into this. I know I had to compile with Vite before and the files were actually there. I just couldn't get them to import correctly.

the final solution was to discard the 'import ContactEmail from...' line and use an absolute path:

const contactEmailPath = path.resolve(currentDir, '../../mails/ContactEmail.js');
const fileUrl = `file://${contactEmailPath}`;
const { default: ContactEmail } = await import(fileUrl);

that resolved it and the contact form template was found immediately.

Vercel Staff

thanks for sharing your solution, it'll help the next person with a similar issue

I'm facing the same issue, i tried your solution but didnt work. How are you deploying yout project?

Im getting the error below.

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/api/emails/WelcomeEmail.js' imported from /var/task/api/send-welcome-email.js

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

const resendClient = initializeResend(); // RENDER REACT COMPONENT TO HTML. const emailHtml = await render( ContactEmail({ name: [contactData.name](https://contactdata.name), email: [contactData.email](https://contactdata.email), phone: [contactData.phone](https://contactdata.phone), message: contactData.message, submittedAt: formatSubmissionTime(), }) ); // PREPARE EMAIL DATA const emailData = { from: EMAIL_CONFIG.from, to: EMAIL_CONFIG.to, subject: EMAIL_CONFIG.subject([contactData.name](https://contactdata.name)), html: emailHtml }; // SEND EMAIL.

This isn't related to the tsconfig at all, you'll need to get Vite to compile your tsx files into js files that become Vercel functions.

I strongly recommend using a framework with bundling support built in as it takes a lot of legwork away from you.

If you want to do it yourself the same way the frameworks do, here are the full docs on the file structure to compile to

https://vercel.com/docs/build-output-api/primitives#serverless-function-configuration

vercel.com

Vercel Primitives

Learn about the Vercel platform primitives and how they work together to create a Vercel Deployment.