如何使 React-Email 和重新发送与 Firebase Cloud Functions 配合使用

Question

我有一个 Nextjs 应用程序，它同时使用 React-Email、Resend 和 Firebase 云功能。目录结构如下所示：

每当在“emailVerification”集合中创建文档时，我想向用户发送电子邮件，云函数如下所示：

import * as logger from "firebase-functions/logger";
import {onDocumentCreated} from "firebase-functions/v2/firestore";
import { Resend } from 'resend'
import EmailVerificationTemplate from '../../react-email/emails/EmailVerification'
import { render } from '@react-email/components';

const resend = new Resend(RESEND_API_KEY);

export const sendEmailVerification = onDocumentCreated("/emailVerifications/{id}", async (event) => {
    // Grab the current value of what was written to Firestore.
    const data = event?.data?.data();

    // Access the parameter `{documentId}` with `event.params`
    logger.log("Requesting email verification for uid", event.params.id, data);

    const emailHtml = render(EmailVerificationTemplate({
        validationCode: data?.code.toString()
    }));

    await resend.emails.send({
        from: '[email protected]',
        to: data?.email,
        subject: 'Your Halbert Verification Code',
        html: emailHtml
    });

});

但是，当我尝试使用以下命令部署此函数时遇到此错误：firebase deploy --only 函数：

如何解决这些错误？

Answer 1

我强烈建议您不要在云函数中使用 React 来生成 HTML 电子邮件正文。 拉入所有需要的依赖项是疯狂的，你几乎肯定会遇到依赖地狱，因为许多 React 或其包假设它们在浏览器上下文中执行，而 Cloud Functions 则不然。

我建议您寻找一些不依赖于 React（或任何其他重型 UI 框架）的 NodeJS 包。 也许类似电子邮件模板？

您可能能够让上述代码最终解决所有 TypeScript 警告/错误并安装所有正确的依赖项，但这对于本质上是搜索和- 的技术来说是令人难以置信的技术量取代 HTML 正文的工作。