render + renderAsync not working in the next.js edge

[VaniaPopovic]

Describe the Bug

Hello,

I have recently been trying to migrate an app we have been using from next-auth 4 to the next-auth 5 beta. Beta allows for the next-auth middleware to run on edge, however @react-email/render doesn't seem to be compatible with it.

It fails with the following message

[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.]
[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.]
 ⨯ node_modules\.pnpm\next@14.0.3_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\esm\build\noop-react-dom-server-legacy.js (6:10) @ renderToStaticMarkup
 ⨯ Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.
null
 ⨯ node_modules\.pnpm\next@14.0.3_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\esm\build\noop-react-dom-server-legacy.js (6:10) @ renderToStaticMarkup
 ⨯ Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.
null
[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.]
 ⨯ node_modules\.pnpm\next@14.0.3_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\esm\build\noop-react-dom-server-legacy.js (6:10) @ renderToStaticMarkup
 ⨯ Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.
null
[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.]
 ⨯ node_modules\.pnpm\next@14.0.3_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\esm\build\noop-react-dom-server-legacy.js (6:10) @ renderToStaticMarkup
 ⨯ Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.

Which package is affected (leave empty if unsure)

@react-email/render

Link to the code that reproduces this issue

https://github.com/VaniaPopovic/react-email-repro

To Reproduce

Clone the above repositiory and head to http://localhost:3000/api/test

• The sample renders the vercel-invite-user in a node endpoint ( similar to what next-auth is doing when trying to send the confirmation email in v4)
• The sample fails to render when using

 export const runtime = "edge";

Expected Behavior

For render and renderAsync to work in both runtimes

What's your node version? (if relevant)

20.6.1

[gabrielmfern]

What version of @react-email/render are you using?

[VaniaPopovic]

What version of @react-email/render are you using?

0.0.9, the latest on npm

[VaniaPopovic]

Same problem with the 0.0.10 version

[ailchenkoDynamo]

Same problem with

@react-email/components": "0.0.12,
@react-email/render": "0.0.10,

[gabrielmfern]

This seems like a problem with the Tailwind component from what the stack trace shows, and from what I gather this seems to be the case, I'll look into fixing this.

[gabrielmfern]

This seems like a problem with the Tailwind component from what the stack trace shows, and from what I gather this seems to be the case, I'll look into fixing this.

Correction on that, I was wrong. Investigating deeper into this.

[oliversoar]

Same issue here, hopefully the PR is merged soon 🙏🏻

[VaniaPopovic]

It is now failing on build time,

app:build: Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
app:build: Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

should I reopen another ticket?

Kind regards,