resend-node: Passing the React email component into the react property throws an error during the next build.

Using the latest Next.js 14.0.1 and resend 2.0.0-canary.2 throws an error when passing the React email template component the react property inside the resend.emails.send function.

Failed to compile.

./node_modules/html-to-text/lib/html-to-text.mjs + 24 modules
Cannot get final name for export 'encodeXML' of ./node_modules/entities/lib/esm/index.js


> Build failed because of webpack errors
   Creating an optimized production build 

This doesn’t work:

export const sendQuotationEmail = async (formData: FormInputs) => {
  const result = QuotationFormSchema.safeParse(formData);
  let data;

  if (result.success) {
    const { name, email, phone, website, service, message } = result.data;

    try {
      data = await resend.emails.send({
        from:
          process.env.EMAIL_FROM_ADDRESS ||
          "Contact Form <onboarding@resend.dev>",
        to: process.env.EMAIL_TO_ADDRESS || "",
        subject: "Message from quotation form",
        reply_to: email,
        react: QuotationFormEmail({
          name,
          email,
          phone,
          website,
          service,
          message,
        }),
      });

  } catch (error: unknown) {
      console.log(error);
    }
  }
};

This works:

import { renderAsync } from "@react-email/render";

export const sendQuotationEmail = async (formData: FormInputs) => {
  const result = QuotationFormSchema.safeParse(formData);
  let data;

  if (result.success) {
    const { name, email, phone, website, service, message } = result.data;

    const html = await renderAsync(
      QuotationFormEmail({
        name,
        email,
        phone,
        website,
        service,
        message,
      }) as React.ReactElement,
    );

    try {
      data = await resend.emails.send({
        from:
          process.env.EMAIL_FROM_ADDRESS ||
          "Contact Form <onboarding@resend.dev>",
        to: process.env.EMAIL_TO_ADDRESS || "",
        subject: "Message from quotation form",
        reply_to: email,
        html: html,
      });

  } catch (error: unknown) {
      console.log(error);
    }
  }
};

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Reactions: 7
  • Comments: 19 (6 by maintainers)

Commits related to this issue

Most upvoted comments

Can confirm this is also happening for me. I’m on Next 14.0.1 and resend 2.0.0

Using renderAsync as the OP mentioned is the workaround. My send method is nothing special:

const html = await renderAsync(MagicLinkEmail({ url, host }));

    await resend.emails.send({
      from: env.RESEND_EMAIL_FROM,
      to: params.identifier,
      subject: `Log in to ${host}`,
      html: html,
    });

Passing react did work locally but fails on build and receive the encodeXML error. It builds fine when using html using the renderAsync part.

facing the same error as well – thought it was an issue with @react-email/render, but looks like it’s an issue with resend itself