Question 258389 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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
./[email protected]
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":
  ./[email protected]
  ./emailcontact-form-email.tsx
  ./actionssendEmail.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>
  )
}
Tags:

2

Answers


  1. 0

    Downgrade react-email/tailwind to ^0.0.8. I encountered this when I used the latest version react-email/tailwind.

    Login or Signup to reply.
  2. 0

    The problem you are having is because your eslinting rules are applying nextjs lint errors to your email templates when your email templates don’t really need nextjs linting rules.

    You can add ‘use client’ to the top of the file where you are importing @react-email/tailwind and that will remove the error. Or you can disable the eslint rule for that one file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search