Error: do not use legacy react-dom/server APIs

[nicitaacom]

Describe the Bug

I got this error

Error: do not use legacy react-dom/server APIs

Which package is affected (leave empty if unsure)

@react-email/render

Link to the code that reproduces this issue

https://github.com/nicitaacom/acc2-send-email-react-email-resend

To Reproduce

To Reproduce

1. git clone https://github.com/nicitaacom/acc2-send-email-react-email-resend
2. pnpm i
3. pnpm dev
4. See error

Expected Behavior

I see error

Might be related

vercel/next.js#57669
vercel/next.js#58305
vercel/next.js#59441

I found no solution there that's why I created this issue

I use Next + TypeScript + Tailwind + react-email + resend
So this issue might be related to react-email as well

I asked chatGPT

You can rewrite the import statement in the file where you are using the react-email package. Look for the file where you have the import statement for @react-email/render and replace the import as follows:

// import ReactDom from 'react-dom/server';
import ReactDom from 'next/dist/compiled/react-dom/cjs/react-dom-server-legacy.browser.development';

I didn't understood where should I change these lines

[gabrielmfern]

Can you try adding @react-email/render on this Next option?

[nicitaacom]

Can you try adding `@react-email/render on this Next option?

I didn't understood - please be more specific
Just let me know code in which file I need to write to fix it
or
Send me PR with fix
or
Send me suggestion about fix - then I try it out - then I let you know is it help

[gabrielmfern]

I mean for you to add @react-email/render into the serverComponentsExternalPackages option into your next.config.js. Something like the following:

https://github.com/resend/react-email/blob/fb7376398deb687eed13c041e1490da356395534/client/next.config.js#L5C3-L12C5

[nicitaacom]

I mean for you to add @react-email/render into the serverComponentsExternalPackages option into your next.config.js.

Thank you for shared example

I added it and error persist

Is render in project work?
If yes - please share file on github as you shared this file where you fire render function
Also if you have successfully implemented react-email and now you send emails without issues - you may create YouTube guide (I watched some guides but theyy doesn't work for me)

[gabrielmfern]

I see, now looking at the full error the actual solution is TL;DR you need to use renderAsync in place of render.

This happens because Next overrides the legacy APIs for rendering (which we use for the default render still) and throws an error so that they do not use it internally. What you can do here is call renderAsync, if it still doesn't work then it should on the latest canary for @react-email/components which you can install with something like npm install @react-email/render@canary.

[gabrielmfern]

I think this issue can only really be fixed once we remove render and rename renderAsync to render to avoid this ambiguity and issues like this. An added benefit that I've found is that this will allow support for Suspense.

[nicitaacom]

I see, now looking at the full error the actual solution is TL;DR you need to use renderAsync in place of render.

This happens because Next overrides the legacy APIs for rendering (which we use for the default render still) and throws an error so that they do not use it internally. What you can do here is call renderAsync, if it still doesn't work then it should on the latest canary for @react-email/components which you can install with something like npm install @react-email/render@canary.

I tried to use renderAsync instad of render
I'm still getting error
Also I tried to pnpm install @react-email/render@canary
Still the same error

Error I'm message about

Error: Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.

I commited changes to minimal example so you make sute that I have "@react-email/components": "^0.0.11" in package.json and

  const emailMessageString = renderAsync(<CheckEmail deliveryDate={deliveryDate} />, {
    pretty: true,
  })

in page.tsx

I tried to clear .next and cache on localhost:3001
Still the same

Fix

import { renderAsync } from "@react-email/render"
import CheckEmail from "./emails/CheckEmail"
import { formatDeliveryDate } from "./utils/formatDeliveryDate"

export default async function Home() {
  const deliveryDate = formatDeliveryDate()

  const emailMessageString = renderAsync(<CheckEmail deliveryDate={deliveryDate} />, {
    pretty: true,
  })

  return <div>hi</div>
}

I added async to function i fire renderAsync function
So this code

  const emailMessageString = renderAsync(<CheckEmail deliveryDate={deliveryDate} />, {
    pretty: true,
  })

Should be in async function to get it work without errors

Question

If I trun code to this

"use client"
import { renderAsync } from "@react-email/render"
import CheckEmail from "./emails/CheckEmail"
import { formatDeliveryDate } from "./utils/formatDeliveryDate"
import { useEffect, useState } from "react"

export default function Home() {
  const deliveryDate = formatDeliveryDate()
  const [emailMessageString, setEmailMessageString] = useState("")

  useEffect(() => {
    async function renderEmail() {
      const emailMessageString = await renderAsync(<CheckEmail deliveryDate={deliveryDate} />, {
        pretty: true,
      })
      setEmailMessageString(emailMessageString)
    }
    renderEmail()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  console.log(18, "emailMessageString - ", emailMessageString)

  return <div>{emailMessageString}</div>
}

I'm still getting error - how to fix error?

[gabrielmfern]

Using renderAsync did fix the issue, but you still need to upgrade @react-email/tailwind as well because it also used to have renderToStaticMarkup inside. Though I think you will need to upgrade @react-email/tailwind to canary as well

[nicitaacom]

@react-email/tailwind

After updating @react-email/tailwind to canary verstion - issue persists

package.json

"@react-email/tailwind": "0.0.14-canary.0",

Code

"use client"
import { renderAsync } from "@react-email/render"
import CheckEmail from "./emails/CheckEmail"
import { formatDeliveryDate } from "./utils/formatDeliveryDate"
import { useEffect, useState } from "react"

export default function Home() {
  const deliveryDate = formatDeliveryDate()
  const [emailMessageString, setEmailMessageString] = useState("")

  useEffect(() => {
    async function renderEmail() {
      const emailMessageString = await renderAsync(<CheckEmail deliveryDate={deliveryDate} />, {
        pretty: true,
      })
      setEmailMessageString(emailMessageString)
    }
    renderEmail()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  console.log(18, "emailMessageString - ", emailMessageString)

  return <div>{emailMessageString}</div>
}

[gabrielmfern]

@nicitaacom This is because you haven't changed from where you are importing Tailwind on the email,
@react-email/components just re-exports all of the components in a per-package basis, so since it is using
the older version this issue arises.

https://github.com/nicitaacom/acc2-send-email-react-email-resend/blob/a678734d5beb38f33d7dbe69a6a5b65efcb303ba/app/emails/CheckEmail.tsx#L1C1-L1C118

[nicitaacom]

Thank you for answer - I solved it with your help
It would be nice if you post solution to this problem in initial issue I open - so other may fix it as well

[nicitaacom]

Solved

Steps to solve this issue:

1. Instal exact same dependencies as me

    "@react-email/render": "0.0.11-canary.0",
    "@react-email/tailwind": "0.0.14-canary.0",

2. Do something like this in client component

"use client"
import { renderAsync } from "@react-email/render"
import CheckEmail from "./emails/CheckEmail"
import { formatDeliveryDate } from "./utils/formatDeliveryDate"
import { useEffect, useState } from "react"

export default function Home() {
  const deliveryDate = formatDeliveryDate()
  const [emailMessageString, setEmailMessageString] = useState("")

  useEffect(() => {
    async function renderEmail() {
      const emailMessageString = await renderAsync(<CheckEmail deliveryDate={deliveryDate} />, {
        pretty: true,
      })
      setEmailMessageString(emailMessageString)
    }
    renderEmail()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  console.log(18, "emailMessageString - ", emailMessageString)

  return <div>{emailMessageString}</div>
}

3. Now you need to import like this (note import tailwind separately)
   email/CheckEmail.tsx

import {
  Head,
  Html,
  Preview,
  Body,
  Container,
  Section,
  Img,
  Heading,
  Text,
  Column,
  Link,
} from "@react-email/components"
import { Tailwind } from "@react-email/tailwind"

4. That's it now you may create API route like this to send email

import CheckEmail from "@/emails/CheckEmail"
import { resend } from "@/libs/resend"
import { NextResponse } from "next/server"

export type TAPISendEmail = {
  from: string
  to: string
  subject: string
  html: string
}

export async function POST(req: Request) {
  const { from, to, subject,html } = (await req.json()) as TAPISendEmail

  try {
    const response = await resend.emails.send({
      from: from,
      to: to,
      subject: subject,
      html: html
    })
    console.log(22, "response - ", response)
    return NextResponse.json({ status: 200 })
  } catch (error) {
    if (error instanceof Error) {
      console.log(29, "SEND_EMAIL_ERROR\n  \n", error.message)
      return new NextResponse(`/api/send-email/route.ts error \n ${error}`, {
        status: 500,
      })
    }
  }
}

And libs/resend.ts

import { Resend } from "resend"

export const resend = new Resend(process.env.NEXT_RESEND_SECRET)