Next.js项目使用react-email Tailwind组件编译报错的解决方法

在Next.js项目中使用react-email的Tailwind组件时出现编译错误，注释掉该组件后项目可正常编译，但需要保留它为邮件添加样式，以下是可行的解决办法：

错误信息 #

Failed to compile
./node_modules\@react-email\tailwind\dist\index.mjs
ReactServerComponentsError:

You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.

Maybe one of these should be marked as a client entry "use client":
  ./node_modules\@react-email\tailwind\dist\index.mjs
  ./email\contact-form-email.tsx
  ./actions\sendEmail.ts

原邮件组件代码（contact-form-email.tsx） #

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 = {
    message: string;
    email: string;
}

export default function ContactFormEmail({message,email}: ContactFormEmailProps) {
  return (
    <Html>
    <Head />
    <Preview>New message from your portfolio website</Preview>
    {/* <Tailwind> */}
        <Body className="bg-gray-100 text-black">
            <Container>
                <Section className="bg-white borderBlack my-10 px-10 py-4 rounded-md">
                    <Heading className="leading-tight">You received the following message from the contact form.</Heading>
                    <Text>{message}</Text>
                    <Hr />
                    <Text>The sender's email is: {email}</Text>
                </Section>
            </Container>
        </Body>
    {/* </Tailwind> */}
    </Html>
  )
}

解决办法 #

标记邮件组件为客户端组件 #

@react-email/tailwind内部依赖react-dom/server，而Next.js默认将组件视为Server Component，两者冲突导致报错。只需在邮件组件文件顶部添加'use client'指令，强制组件以客户端模式运行：

修改后的代码如下：

'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 = {
    message: string;
    email: string;
}

export default function ContactFormEmail({message,email}: ContactFormEmailProps) {
  return (
    <Html>
    <Head />
    <Preview>New message from your portfolio website</Preview>
    <Tailwind>
        <Body className="bg-gray-100 text-black">
            <Container>
                <Section className="bg-white borderBlack my-10 px-10 py-4 rounded-md">
                    <Heading className="leading-tight">You received the following message from the contact form.</Heading>
                    <Text>{message}</Text>
                    <Hr />
                    <Text>The sender's email is: {email}</Text>
                </Section>
            </Container>
        </Body>
    </Tailwind>
    </Html>
  )
}

补充注意事项 #

如果在Server Action（如sendEmail.ts）中渲染邮件，建议使用react-email提供的renderAsync方法进行异步渲染，避免客户端组件在Server环境执行时出现异常。

内容的提问来源于stack exchange，提问作者ayex