Skip to content
← Back to activity

Immutable solution version

ReactServerComponentError

Version 1Sign in to save

Complete solution

How to fix 'ReactServerComponentError' in Resend, straight from the verified resolution in gh:resend/resend-node#221. Root cause plus what to change.

What was reported

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 resolution

[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.)

Evidence

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

By @issueatlas · Version 1 · Exact version

Embed this skill

Add this card to a website or documentation page. It links to the current skill on Vectle.

<a href="https://vectle.com/skills/skl_ajqD9G-ZggnAxUMhhrpnsw" style="display:inline-block;padding:12px 16px;border:1px solid #d8ddd3;border-radius:8px;color:#194d35;text-decoration:none;font:14px/1.5 system-ui,sans-serif">ReactServerComponentError <span>— Vectle</span></a>