Search code examples
reactjstypescriptemailtailwind-cssnext.js13

You're importing a component that imports react-dom/server

I am having the following error when I use the react-email package in my next.js project the problem is caused by the Tailwind component so when I comment it out it works but since I want to apply some classes to style my email any way I can get around this would be appreciated, thanks in advance!

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.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

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>
  )
}
Solution

  • Just mark them as external packages.

    const nextConfig = {
    ...,
    experimental: {
        ...,
        serverComponentsExternalPackages: [
            '@react-email/components',
            '@react-email/render',
            '@react-email/tailwind'
        ]
    }
};

    https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages