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

Asked 28/9, 2023 at 13:27 Answered 4/11, 2023 at 6:9

Solved reactjs typescript email tailwind-css next.js13

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

Borges answered 28/9, 2023 at 13:27 Comment(7)

But what does @/lib/utils import? Because if that's a catch-all utils file, good bet that either directly or indirectly imports react-dom/server. – Janetjaneta 30/9, 2023 at 16:46

@Mike'Pomax'Kamermans i add @/lib/utils file to the question so that you can see it has not caused the issue. – Borges 2/10, 2023 at 11:49

Then the next action is going to have to be turning your code in a minimal reproducible example, so that you can show enough code in your post that folks can copy, and see reproduce the same error (although it's entirely possible that while forcing yourself to form that MCVE, you're going to find the error already) – Janetjaneta 2/10, 2023 at 15:43

@Mike'Pomax'Kamermans so, what are you saying, make it clear. I already give the necessary code? – Borges 3/10, 2023 at 11:27

No, what I'm saying is to read the minimal reproducible example article, and then applying that to your case by further reducing the fairly large amount of code you're showing into a single, small, piece of code that still reproduces the problem. You're currently showing a number of files because you don't know where the problem is. Running through the MCVE exercise helps with that (it helps with that so well, in fact, that it usually makes you discover the problem on your own, no longer needing folks on SO to help. But in the rare cases that doesn't happen, the now minimal code is perfect for putting in your post) – Janetjaneta 3/10, 2023 at 14:19

please carefully read my question from top to bottom, I now what caused the error and in fact I mentioned it at the very top, I guess you do not seem to read it and you think it is caused by @/lib/utils,so i provided it to show you it did not caused the error. Then why I provided other files here because as you might have guessed it I needed to show every body how they use the contact-form-emial.tsx file so that it is clear. – Borges 3/10, 2023 at 15:26

No, I'm not, I want you to edit your post to focus on that: if you know it's the tailwind component, then show the smallest possible bit of code that shows that happening to folks who copy-paste that code. E.g. a single self-contained App that does nothing except show an <h1> or something, imports tailwind, and shows that error happening when we copy your code and run it. If it is what you say, then none of the code you're currently showing are necessary, but a minimal reproducible example is. – Janetjaneta 3/10, 2023 at 15:35

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

Trauma answered 4/11, 2023 at 6:9 Comment(4)

sorry for late replay, I was having some hardware issue with my pc. Indeed it works. – Borges 9/11, 2023 at 14:7

First I tried adding this to my main project's next.config, and it didn't work. I had to specifically add it to the next.config of the .react-email folder, that's generated when running pnpm email for the first time. – Bivalve 11/12, 2023 at 16:30

Probably the worst answer I have ever heard. Don't fix the problem, just mark them as external. WTF? – Bracey 3/4 at 10:27

This could lead to a whole slew of other problems and things exposed. This is a shitty answer and should never have been accepted. – Bracey 3/4 at 10:28

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

Salena answered 30/9, 2023 at 16:14 Comment(1)

Note that this is more of an anecdote than an answer: why should folks downgrade? EI.e. what changed in the newer version(s) to cause this, and do you have links to issues that talk about that, or even official docs, etc? – Janetjaneta 30/9, 2023 at 16:44

You should add reactServerComponents in the next.config.js file

  reactServerComponents: {
use: ["@react-email/tailwind"]}

and then you can use your tailwind element in your component

Psychoactive answered 20/10, 2023 at 19:27 Comment(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.

Shebashebang answered 4/10, 2023 at 13:28 Comment(2)

i already tried to use 'use client' directive on contact-form-email.tsx but that does not work since i am importing and using that client component in sendEmail.tsx which is a server component because i am using serverActions which is not possible.please tell me how could i disable the eslint rule for that one file – Borges 9/10, 2023 at 12:17

Any luck on this? – Boletus 18/10, 2023 at 10:27

Recommended topics

Hot tags