完整错误：
尝试从服务器调用默认导出/email/contact-form-email.tsx，但它位于客户端。不可能从服务器调用客户端函数，它只能呈现为组件或传递给客户端组件的props。
我正在使用Next.js 13服务器操作发送电子邮件。我使用的软件包是
"resend": "^0.16.0"
"@react-email/components": "^0.0.7"电子邮件服务和样式的电子邮件。
ts操作文件类似于
'use server'
import React from 'react';
import { getErrorMessage, validateData } from '@/lib/utils';
import { Resend } from 'resend';
import ContactFormEmail from '@/email/contact-form-email';
const resend = new Resend(process.env.RESEND_API_KEY);
export const sendEmail = async(formData : FormData) => {
const senderEmail = formData.get('senderEmail');
const contactMessage = formData.get('contactMessage');
try {
console.log('sender email : ' + senderEmail);
console.log('contact message : ' + contactMessage);
resend.emails.send({
from: 'Contact form <[email protected]>',
to: '[email protected]',
subject: 'Message from contact form of portfolio.',
reply_to: senderEmail as string,
react : React.createElement(ContactFormEmail, {
contactMessage: contactMessage as string,
senderEmail : senderEmail as string,
})
});
} catch (error : unknown) {
return {
error: getErrorMessage(error)
}
}
}而使用react-email进行样式化的contact-form-email.tsx是
'use client'
import React from 'react'
import {
Html,
Body,
Head,
Heading,
Hr,
Container,
Preview,
Section,
Text
} from '@react-email/components'
import { Tailwind } from '@react-email/tailwind'
type ContactFormEmailProps = {
contactMessage : string,
senderEmail : string,
}
function ContactFormEmail({contactMessage, senderEmail } : ContactFormEmailProps) {
return (
<Html>
<Head/>
<Preview>New message from you portfolio site</Preview>
<Tailwind>
<Body>
<Container>
<Section>
<Heading>You received the following message from the contact form</Heading>
<Text>{contactMessage}</Text>
<Hr/>
<Text>The sender's email is : {senderEmail}</Text>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
}
export default ContactFormEmail如果我没有在contact-form-email.tsx上设置'use client'，则会弹出另一个错误
该错误是由于在“./email/contact-form-email. tsx”中导入“@react-email/tailwind/dist/index.mjs”而导致的。
也许其中一个应该标记为客户端条目“use client”：
./email/contact-form-email.tsx ./actions/sendEmail.ts
如果我没有将sendEmail.ts设置为'use server'，那么它会显示阅读API键的问题
错误：缺少API密钥。将其传递给构造函数new Resend("re_123")
2条答案
按热度按时间dgsult0t1#
要解决这个问题，您需要从顶部删除
use client;，并从tailwind导入Tailwind而不是组件，但使用0.0.8版本，它应该可以正常工作。contact-form-email.tsx
package.json
rslzwgfq2#
我遇到了同样的问题，但我没有找到解决办法。现在我只是注解掉了Tailwind组件
编辑
从
@react-email/components而不是@react-email/tailwind的顺风似乎解决了这个问题。