Error: A Node.js API is used (MessageChannel) which is not supported in the Edge Runtime. #1630

tszhong0411 · 2024-08-26T14:51:54Z

Describe the Bug

Using React 19 + Next.js 15

I want to use @react-email/render on edge runtime. However, I got this error:

unhandledRejection: Error: A Node.js API is used (MessageChannel) which is not supported in the Edge Runtime.

Which package is affected (leave empty if unsure)

@react-email/render

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/react-email-render-on-edge-runtime-5dlkxp

To Reproduce

Go to /api/email
See the error

Expected Behavior

No errors. And render the component successfully in email.

What's your node version? (if relevant)

No response

The text was updated successfully, but these errors were encountered:

gabrielmfern · 2024-08-27T20:51:28Z

Not 100% sure we can do something about this as react-dom, which we use internally, seems to be the one using MessageChannel here. All the other APIs we use are supported on the edge without issues.

I've also noticed that the issue goes away when downgrading the React version and Next version to latest, so I do believe we will have support for MessageChannel and this issue going away soon. That being said, we should keep the issue open until it is fixed on Next. I suppose you can also downgrade React to an RC that did not use MessageChannel yet.

shkreios · 2024-09-27T15:31:32Z

@gabrielmfern , I’m not sure if supporting the Edge runtime as a separate environment, alongside browser and Node, is within the scope of react-email. However, if it is, you might find it helpful to review how the Next.js team addressed this issue here.

They used the react-dom/server.edge import to ensure compatibility between React and the Edge runtime.

gabrielmfern · 2024-10-14T14:26:19Z

I’m not sure if supporting the Edge runtime as a separate environment, alongside browser and Node, is within the scope of react-email
They used the react-dom/server.edge import to ensure compatibility between React and the Edge runtime.

Definitely within the scope. Thanks for letting us know about the react-dom/server.edge export, but that does seem to be exclusive to the newer RCs, so I don't think we can really use it yet until we remove support for 18.x.

gabrielmfern · 2024-10-24T19:59:32Z

On another note, seems like Next 15 with edge routes also have this error when using the latest @react-email/render. Another possibility is that we can attempt at importing the edge version and fallback to other versions if it fails. Might need some finagling, but we'll need a way to have both versions working at the same time.

cjkihl · 2024-10-25T06:06:14Z

Wrote my own render function using react-dom/server.edge

import type { ReactDOMServerReadableStream } from "react-dom/server";

const readStream = async (stream: ReactDOMServerReadableStream) => {
	let result = "";
	// means it's a readable stream
	const writableStream = new WritableStream({
		write(chunk) {
			result += new TextDecoder("utf-8").decode(chunk);
		},
	});
	await stream.pipeTo(writableStream);
	return result;
};

export const renderEdge = async (element: React.ReactNode) => {
	const renderToReadableStream = (await import("react-dom/server.edge"))
		.renderToReadableStream;
	const r = await renderToReadableStream(element);
	const html = await readStream(r);
	const doctype =
		'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
	const document = `${doctype}${html.replace(/<!DOCTYPE.*?>/, "")}`;
	return document;
};

It solves the problem but I encountered a new issue instead:
TypeError: Cannot read properties of undefined (reading 'H')

It seems like React mail is not supporting NextJS 15 unfortunately. I'm not sure how to get past this.

In any case If it's complicated to support edge in the same render function due to backwards compatibility I would't mind having a separate render function for edge runtime. :)

gabrielmfern · 2024-10-25T14:37:58Z

@cjkihl Noticed the same error when experimenting with the export. Looking at the compiled code, I am pretty sure this is because Next does its thing with pre-compiled React versions while still involving the user's React version, might be a bug on their side.

gabrielmfern · 2024-10-25T16:19:55Z

Made an issue about the error when trying to render with react-dom/server.edge vercel/next.js#71865

gabrielmfern · 2024-10-31T16:18:30Z

Based on what I get from vercel/next.js#71865 (comment), this issue is probably only going to be fully fixed once we get react-markup fully implemented and released, unless we might adopt it while it is still experimental

dmarcucci · 2024-11-06T20:55:18Z

So I just got this issue today myself, but I've been using Pages Router and it wasn't happening until I tried to refactor to use App Router instead. In both scenarios, I have the function set to use Edge Runtime.

Is everybody here only using App Router? If so, does the issue resolve if you switch to Pages Router?

Edit: I just realized that somebody on the Next team confirmed this on the issue that @gabrielmfern logged there. So if you don't mind switching to Pages Router, that seems to be a temporary workaround.

dualdetail · 2024-11-08T21:16:39Z

Is there a timeline for react-markup anywhere?

gabrielmfern · 2024-11-10T03:11:45Z

@dualdetail Not that I know of, I don't think that they even announced it anywhere yet. But I assume it might release around the time React 19 is released.

tszhong0411 added the Type: Bug Confirmed bug label Aug 26, 2024

gabrielmfern added the Package: @react-email/render label Aug 27, 2024

gabrielmfern mentioned this issue Oct 28, 2024

fix(render): Browser version of react-dom/server being used on Next.js' Edge #1747

Draft

gabrielmfern added the Framework: NextJS label Oct 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error: A Node.js API is used (MessageChannel) which is not supported in the Edge Runtime. #1630

Error: A Node.js API is used (MessageChannel) which is not supported in the Edge Runtime. #1630

tszhong0411 commented Aug 26, 2024 •

edited

Loading

gabrielmfern commented Aug 27, 2024 •

edited

Loading

shkreios commented Sep 27, 2024

gabrielmfern commented Oct 14, 2024

gabrielmfern commented Oct 24, 2024 •

edited

Loading

cjkihl commented Oct 25, 2024 •

edited

Loading

gabrielmfern commented Oct 25, 2024

gabrielmfern commented Oct 25, 2024

gabrielmfern commented Oct 31, 2024 •

edited

Loading

dmarcucci commented Nov 6, 2024 •

edited

Loading

dualdetail commented Nov 8, 2024

gabrielmfern commented Nov 10, 2024

Error: A Node.js API is used (MessageChannel) which is not supported in the Edge Runtime. #1630

Error: A Node.js API is used (MessageChannel) which is not supported in the Edge Runtime. #1630

Comments

tszhong0411 commented Aug 26, 2024 • edited Loading

Describe the Bug

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

gabrielmfern commented Aug 27, 2024 • edited Loading

shkreios commented Sep 27, 2024

gabrielmfern commented Oct 14, 2024

gabrielmfern commented Oct 24, 2024 • edited Loading

cjkihl commented Oct 25, 2024 • edited Loading

gabrielmfern commented Oct 25, 2024

gabrielmfern commented Oct 25, 2024

gabrielmfern commented Oct 31, 2024 • edited Loading

dmarcucci commented Nov 6, 2024 • edited Loading

dualdetail commented Nov 8, 2024

gabrielmfern commented Nov 10, 2024

tszhong0411 commented Aug 26, 2024 •

edited

Loading

gabrielmfern commented Aug 27, 2024 •

edited

Loading

gabrielmfern commented Oct 24, 2024 •

edited

Loading

cjkihl commented Oct 25, 2024 •

edited

Loading

gabrielmfern commented Oct 31, 2024 •

edited

Loading

dmarcucci commented Nov 6, 2024 •

edited

Loading