尝试从服务器调用默认导出，但它在客户端上

Question

尝试从服务器调用默认导出，但它在客户端上

完整错误：

尝试从服务器调用 /email/contact-form-email.tsx 的默认导出，但它位于客户端。无法从服务器调用客户端函数，它只能呈现为组件或传递给客户端组件的 props。

我正在使用 Next.js 13 服务器操作来发送电子邮件。我正在使用的软件包是

"resend": "^0.16.0"
"@react-email/components": "^0.0.7"

Run Code Online (Sandbox Code Playgroud)

用于电子邮件服务和电子邮件样式。

sendEmail.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  <onboarding@resend.dev>',
        to: 'test@gmail.com',
        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)
      }
    }
}

Run Code Online (Sandbox Code Playgroud)

使用 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

Run Code Online (Sandbox Code Playgroud)

如果我没有设置'use client'contact-form-email.tsx 则会弹出另一个错误

该错误是由于在“./email/contact-form-email.tsx”中导入“@react-email/tailwind/dist/index.mjs”引起的。

也许其中之一应该标记为客户端条目“使用客户端”：
./email/contact-form-email.tsx ./actions/sendEmail.ts

如果我没有设置 sendEmail.ts，'use server'那么它会显示读取 API 密钥的问题

错误：缺少 API 密钥。将其传递给构造函数new Resend("re_123")

Answer 1

abd*_*f-b -1

我遇到了同样的问题，但没有找到解决方案。现在我只是注释掉了 Tailwind 组件

// import { Tailwind } from '@react-email/tailwind'

Run Code Online (Sandbox Code Playgroud)

编辑

@react-email/components从而不是导入 Tailwind@react-email/tailwind似乎可以解决这个问题。

import { ..., Tailwind } from "@react-email/components";

Run Code Online (Sandbox Code Playgroud)

归档时间：	2 年，1 月前
查看次数：	1803 次
最近记录：	2 年前