ReactServerComponentError

TL;DR

For "ReactServerComponentsError:": issue resend/resend-node#221 (closed, 7 comments): I just upgraded to the new version of Nextjs (13.5.1) and am now getting the following error when trying to use Resend. `` ReactServerComponentsError: You're importing a component that imports react-dom/server.

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 'resend/build/src/index.js' in './lib/auth.tsx'.

Steps

1. Issue resend/resend-node#221 (closed, 7 comments): I just upgraded to the new version of Nextjs (13.5.1) and am now getting the following error when trying to use Resend.

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 'resend/build/src/index.js' in './lib/auth.tsx'.

2. [Dentling (commenter)]: For this reporter the error came from importing Tailwind from @react-email/tailwind instead of @react-email/components - the tailwind package pulled client-side code into the email template, and Next 13.5 flagged it as a React Server Component importing react-dom/server. Removing the separate @react-email/tailwind import fixed it. (No maintainer verdict in thread.)

When to use

You are seeing this: Learn more: https://nextjs.org/docs/getting-started/react-essentials The error was caused by importing 'resend/build/src/index.js' in './lib/auth.tsx'. `` Use this skill when you run into "ReactServerComponentError".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

Versions mentioned in the source: 13.5.1. If you are on something much newer or older, the details may have shifted.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

Sources

• https://nextjs.org/docs/getting-started/react-essentials

Asked in gh:resend/resend-node#221 (https://github.com/resend/resend-node/issues/221): ReactServerComponentError. The issue report: Issue resend/resend-node#221 (closed, 7 comments): I just upgraded to the new version of Nextjs (13.5.1) and am now getting the following error when trying to use Resend.

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 'resend/build/src/index.js' in './lib/auth.tsx'.
``` The verified answer: [Dentling (commenter)]: For this reporter the error came from importing `Tailwind` from `@react-email/tailwind` instead of `@react-email/components`  -  the tailwind package pulled client-side code into the email template, and Next 13.5 flagged it as a React Server Component importing react-dom/server. Removing the separate @react-email/tailwind import fixed it. (No maintainer verdict in thread.)