Can only use @react-email/render and @react-email/components with serverComponentsExternalPackages on NextJS

[AuroraLantean]

Describe the Bug

My files:
ContactFormEmailTemplate : showing email with Tailwindcss
ButtonOnClient: a button with useState() to manage client states...
sendEmail: a server function to send submitted emails from clients

Error from the terminal:

./components/emailTemplates/ContactFormEmailTemplate.tsx
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

The error was caused by importing '@react-email/tailwind/dist/index.mjs' 
in './components/emailTemplates/ContactFormEmailTemplate.tsx'.

Maybe one of these should be marked as a client entry "use client":
  ./components/emailTemplates/ContactFormEmailTemplate.tsx
  ./lib/sendEmail.ts
 ○ Compiling /not-found ...

If I add 'use client' to my ContactFormEmailTemplate, the page can render, but it fails when I click on my button to submit the email:

Error: Cannot access ContactFormEmailTemplate.tag on the server. You cannot dot into 
a client module from a server component. You can only pass the imported name through.

So my ContactFormEmailTemplate and sendEmail functions definitely have to be on the server, but my ButtonOnClient definitely has to be on the client...

Which package is affected (leave empty if unsure)

@react-email/tailwind

Link to the code that reproduces this issue

https://github.com/AuroraLantean/react-email-tailwind

To Reproduce

Install the latest @react-email/tailwind version 0.0.9 into my repo above:
npm add @react-email/tailwind
then run my code: npm run dev

But after downgrading that to @react-email/tailwind ^0.0.8, it runs fine.
See discussion here: https://stackoverflow.com/questions/77195390/youre-importing-a-component-that-imports-react-dom-server

Expected Behavior

no error should appear
NextJs doc: https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components

What's your node version? (if relevant)

bun 1.0.6 and node 18.18.2

[Jarred-Sumner]

This might be a peer dependencies bug in Bun. Can you try setting install.peer = false in bunfig.toml, if using bun as a package manager?

[AuroraLantean]

Hello Jarred, I have extracted my code into a new repo. Please see the new repo link above.
After adding the new bunfig.toml file and running with bun run dev, the result is the same.
After installing the latest NodeJs LTS 18.18.2 and running with npm run dev, the result is the same.
Something is different between @react-email/tailwind 0.0.8 and 0.0.9

[drimov]

Hello Jarred, i have something like that, and i try to use only @react-email/component and it's work. Tailwind is also include in @react-email/component. Let me know if is work for you.

[luantran1311]

@drimov
I tried import { Tailwind } from "@react-email/components"; and it works now.

[bukinoshita]

Does this still happens with the latest?

[etc-tiago]

Yes, it still happens on version 0.0.9 with nextjs 13.5.4/14.0.3

[etc-tiago]

Solve with transpilePackages and serverComponentsExternalPackages on next.config.mjs:

/** @type {import('next/types').Config} */

const config = {
  experimental: {
    serverComponentsExternalPackages: [
      '@react-email/components',
      '@react-email/render',
      '@react-email/html',
    ],
  },
  transpilePackages: [
    '@react-email/components',
    '@react-email/render',
    '@react-email/html',
  ]
}

export default config

[jwellvaping]

@etc-tiago

Solve with transpilePackages and serverComponentsExternalPackages on next.config.mjs:

/** @type {import('next/types').Config} */

const config = {
  experimental: {
    serverComponentsExternalPackages: [
      '@react-email/components',
      '@react-email/render',
      '@react-email/html',
    ],
  },
  transpilePackages: [
    '@react-email/components',
    '@react-email/render',
    '@react-email/html',
  ]
}

export default config

Thank you! This works perfectly!

[vicary]

In my case, installing @react-email/render triggers the issue.

Adding only experimental.serverComponentsExternalPackages suggested by @etc-tiago solves my issue, transpilePackages is not required.

[nerdyman]

I don't think this is bun-specific, I'm getting this in a yarn classic monorepo on node 20.9.0.

[gabrielmfern]

For anyone coming in here through search or somewhere else, a workaround for now is to add the following to your next.config.js:

{
  experimental: {
    serverComponentsExternalPackages: [
      '@react-email/components',
      '@react-email/render',
    ],
  }

If you are using @react-email/tailwind with a version older than 0.0.14 you'll have to also add it into serverComponentsExternalPackages.