Fix unexpected server error with React-Email and Resend with NextJS 13.4.12?

[ulrich00132]

Describe the Bug

Hi there. I'm on the last phase of my project. You guessed it, I'm adding emails that I can send to users.
I'm facing an expected bug even when I followed every step of the React-Email and Resend documentations.

I'd like to send email to users after they signed up. But I always have an error from NextJs.

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/dist/index.mjs' in './app/libs/resend.ts'.

Maybe one of these should be marked as a client entry "use client": ./app/libs/resend.ts ./app/api/register/route.ts"_

Here are the solutions I've already tried:

• API route (like above)
• Server actions
• Adding serverComponentsExternalPackages in my next.config.js:

[
  "@react-email/components",
  "@react-email/render",
  "@react-email/tailwind"
]

• Adding 'use client'

Thanks in advance for your help. You will save "a smile :) "

Which package is affected (leave empty if unsure)

@react-email/components, react-email

CODE in my App Router (app/api/register)

import bcrypt from 'bcrypt';
import prisma from "@/app/libs/prismadb"; 
import { NextResponse } from 'next/server';

import { resend } from '@/app/libs/resend';

export async function POST (request: Request) { 
  const body = await request.json();

  const {
    email,
    firstName,
    lastName,
    password
  } = body

  // ... Code to register the user

  // Send Email to User
  await resend.emails.send({
    from: "[email protected]",
    to: email,
    subject: "Welcome",
    html: "<p1>Thanks for signing up!</p1>"
  })

  return NextResponse.json(user);
}

To Reproduce

• Create a Signup Page
• When user clicks on sign up button
• An user account is created
• User received an email

Expected Behavior

User receives a signup email after signing up

What's your node version? (if relevant)

v20.10

[gabrielmfern]

Can you please make a reproduction repository? This is most likely something very specific to the way you've setup things as I've only had serverComponentsExternalPackages not work when on development.

[gabrielmfern]

Also, simple idea but might work, try adding "resend" into your serverComponentsExternalPackages as well.

[ulrich00132]

Hi Gabiel, Thanks for your prompt response. I did it. I added “resent” in my serverComponentsExternalPackages but It just didn’t work. I think I’ve exhausted all workarounds. The only thing I hadn’t done is upgrading NextJS. So I created another simple project with the latest version of NextJS. I followed the resend documentation, in 30 min, I sent my 1st email. So back to my initial project, I upgraded from Next V13 to V14. And it worked as expected. Next step is to focus on the design of the email. However I need to upgrade some libraries (like Next-Auth) as well since some features are now broken. I’m sharing this with you just in case. It might help other devs. But I achieved my goal. Sending emails with Resend. Thanks again for your help. From: Gabriel Miranda ***@***.***> Date: Monday, 22 January 2024 at 13:03 To: resend/react-email ***@***.***> Cc: ulrich00132 ***@***.***>, Author ***@***.***> Subject: Re: [resend/react-email] Fix unexpected server error with React-Email and Resend with NextJS 13.4.12? (Issue #1219) Also, simple idea but might work, try adding "resend" into your serverComponentsExternalPackages as well. — Reply to this email directly, view it on GitHub<#1219 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALJNNMYMU7JLJCSCSW4WDDTYPZIQ5AVCNFSM6AAAAABCDR4WASVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBTHA3DCOBVGU>. You are receiving this because you authored the thread.Message ID: ***@***.***>