如何使用 React-Email 修复意外的服务器错误并使用 NextJS 13.4.12 重新发送？

Question

即使我遵循了 React-Email 和 Resend 文档的每一步，我也面临着预期的错误。

我想在用户注册后向他们发送电子邮件。但我总是在 NextJs 中遇到错误。

这是错误消息：

“ReactServerComponents错误：

您正在导入一个导入react-dom/server的组件。要修复此问题，请直接将内容呈现或返回为服务器组件，而不是为了性能和安全性。 了解更多：https://nextjs.org/docs/getting-started/react-essentials

该错误是由于在 './app/libs/resend.ts' 中导入 'resend/dist/index.mjs' 引起的。

也许其中之一应该标记为客户端条目“使用客户端”： ./app/libs/resend.ts ./app/api/register/route.ts"

我的应用程序路由器中的代码（app/api/register）

import bcrypt from 'bcrypt';

从“@/app/libs/prismadb”导入prisma； 从 'next/server' 导入 { NextResponse };

从'@/app/libs/resend'导入{重新发送}；

导出异步函数 POST( 请求： 请求 ){ const body =等待request.json();

const {
    email,
    firstName,
    lastName,
    password
} = body

// ... Code to register the user

// Send Email to User
await resend.emails.send({
    from: "[email protected]",
    to: email,
    subject: "Welcome",
    html: "<h1>Thanks for signing up!</h1>"
})

return NextResponse.json(user);

};

你会如何解决这个问题？

这是我已经尝试过的解决方案：

• API（如上）

• 服务器操作

• 我添加了这个“serverComponentsExternalPackages：[ '@react-email/组件', '@react-email/渲染', '@react-email/tailwind' ],” 在我的 next.config.js 中

• 我什至添加了“使用客户端”

预先感谢您的帮助。您将节省“微笑:)”

Answer 1

我发现解决此问题的唯一方法是升级到最新版本的 NextJs。

如果您使用 Typescript，请确保也更新它。

更多信息请参见 NextJs 文档。