How to fix unexpected server error with React-Email and Resend with NextJS 13.4.12?

Question

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.

Here is the error message:

"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"

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: "<h1>Thanks for signing up!</h1>"
})

return NextResponse.json(user);

};

How would you fixe this ?

Here are the solution I've already tried:

• API (like above)

• Server actions

• I add this "serverComponentsExternalPackages: [ '@react-email/components', '@react-email/render', '@react-email/tailwind' ]," in my next.config.js

• I even add "use client"

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

Answer 1

The only way I've found to fix this is by upgrading to the latest version of NextJs.

If you're using Typescript, ensure to update it as well.

More information here in the NextJs documentation.