renderToReadableStream function throws an error in Next.js 14

[Mriganka5137]

Describe the Bug

renderToReadableStream function throws an error in Next.js 14

When using react-email in next.js 14 app Found the following bug: ./node_modules/@react-email/render/dist/index.mjs Attempted import error: 'renderToReadableStream' is not exported from 'react-dom/server' (imported as 'renderToReadableStream').

I have to modify the following code in the @react-email package `import { renderToPipeableStream, renderToStaticMarkup as renderToStaticMarkup2 } from "react-dom/server";

async function renderToString(children) { const stream = await renderToPipeableStream(children)`

The renderToReadableStream function is not compatible with Node.js, as it requires Web Streams support. For Node.js, you should use the renderToPipeableStream function instead.

Which package is affected (leave empty if unsure)

@react-email/render

Link to the code that reproduces this issue

https://github.com/Mriganka5137/react-email-bug

To Reproduce

I just followed all the steps that were mentioned in the react-email docs.

Expected Behavior

The expected behaviour is the react-email client on localhost:3030 port

What's your node version? (if relevant)

v21.1.0

[gabrielmfern]

This issues should've been fixed with @react-email/[email protected] which is on @react-email/[email protected]. Is this problem happening on build? Also, I tried cloning your repo and build seems to work just fine. Maybe clearing the dependencies and the lock and reinstalling might fix the issue here?

[inventive-username]

I'm having no luck with @react-email/[email protected] - @gabrielmfern do you have any suggestions on how to resolve this?

[Mriganka5137]

I'm having no luck with @react-email/[email protected] - @gabrielmfern do you have any suggestions on how to resolve this?

I had to manually replace 'renderToReadableStream' with 'renderToPipeableStream' in the node_modules of ' .react-email >node_modules > @react-email'

[gabrielmfern]

@Mriganka5137, @inventive-username can you guys try deleting the .react-email folder and trying again?

[inventive-username]

@gabrielmfern unfortunately my CI/CD pipeline setup does not allow me to manually update node_modules - however, I found that downgrading from next 14 to next 13 worked for me 👍

[gabrielmfern]

@gabrielmfern unfortunately my CI/CD pipeline setup does not allow me to manually update node_modules - however, I found that downgrading from next 14 to next 13 worked for me 👍

Not sure if this is true, but maybe you aren't git ignoring the .react-email folder? It should be ignored generally

[aadamw]

Hey @Mriganka5137 I've found a workaround for this issue. You need to install the @react-email/render: 0.0.9 manually

pnpm install   @react-email/render

[ryanhefner]

Hey @Mriganka5137 I've found a workaround for this issue. You need to install the @react-email/render: 0.0.9 manually

pnpm install   @react-email/render

This fixed it for me.

[Mriganka5137]

Hey @Mriganka5137 I've found a workaround for this issue. You need to install the @react-email/render: 0.0.9 manually

pnpm install   @react-email/render

This fixed it for me.

Thank you so much. Worked for me too.

[cipriancaba]

@react-email/render gets resolved to various different versions. Please pin it to the latest in all the components that use it in the next release

[eduardobernardo]

I was experiencing the same problem Attempted import error: 'renderToReadableStream' is not exported from 'react-dom/server' (imported as 'renderToReadableStream') using "next": "^14.0.3",.

I managed to solve it by removing the @react-email folder from the node_modules folder and reinstalling the packages manually in their latest versions ("@react-email/render": "^0.0.9", "@react-email/ preview": "0.0.7", "@react-email/components": "^0.0.11",).

#1046 may help fix the issue.

[jamesvclements]

Manually installing @react-email/render per @aadamw's fixed it for me as well

npm i @react-email/render

I'm on:

"dependencies": {
  "@react-email/components": "0.0.12",
  "@react-email/render": "^0.0.10",
  "react-email": "1.10.0",
  "resend": "2.0.0",
}

[RoyBkker]

Manually installing @react-email/render per @aadamw's fixed it for me as well. Thanks mate