`render` does not work in the browser

[hampustagerud]

Describe the Bug

Opening an issue since it was suggested to do that first instead of just opening a pull request 😄

I am trying to render an email in the browser but the react server is not imported properly (see reproduction) 🙂 I have solved this locally by patching the package and changing this line like this:

- const reactDOMServer = await import('react-dom/server');
+ const reactDOMServer = (await import('react-dom/server')).default;

This issue is that importing modules dynamically in the browser returns a Module and not the default export which typescript seem to suggest. Not sure if typescript can be reconfigured to reflect this, or if there's a better solution than this. The tests seem to pass and I can use the render function when trying out the fix locally at least!

Which package is affected (leave empty if unsure)

@react-email/render

Link to the code that reproduces this issue

https://stackblitz.com/edit/vitejs-vite-8gysj2qp?file=src%2Fmain.tsx

To Reproduce

Use the render function in a browser.

Expected Behavior

The email is rendered to HTML.

What's your node version? (if relevant)

No response

[gabrielmfern]

Feel free to open a PR for this, if the tests themselves pass it should be fine. For the typescript part, you can just use something like we do here

react-email/packages/render/src/node/render-node.spec.tsx

Line 11 in d4d9efd

type Import = typeof import('react-dom/server') & {

[wottpal]

+1

Facing the same issue when using react-email in a trigger.dev task node environment. The patch fixes it.

[philinit]

The bug appears in version 1.0.3 and later.
Version 1.0.2 works correctly.

[wottpal]

I can confirm, it's working on 1.0.2 w/o any issues.

[gabrielmfern]

seems like it only happens when running dev as well - when running with vite preview after build, it works

[wottpal]

+1

Facing the same issue when using react-email in a trigger.dev task node environment. The patch fixes it.

@gabrielmfern As mentioned above, it's not only happening in dev mode for me but when using react-email in production node environment via Trigger.dev. So it would be great if this could be escalated somehow. Still pinned to 1.0.2.

[tobimori]

Can confirm that this happens w/ Vite + CF Vite Plugin, fixed by downgrading render to 1.0.2.

[ijxy]

I ran into a similar/related when rendering dynamic previews in my applications.

Specifically, rendering was silently failing on mobile devices only (specifically iPhone/iPad).

Fortunately, using renderToString from react-dom/server directly "just works" to render the HTML. I still use the exported render method on the server.

Here's my Preview component, in case anyone finds it useful:

"use client";

import { JSX, useEffect, useState } from "react";
import { renderToString } from "react-dom/server";

import { InlineFrame } from "@internal/react"; // this is just a wrapper around `<iframe />`

export type EmailPreviewProps = {
  template: JSX.Element;
};

export function EmailPreview({ template }: EmailPreviewProps) {
  const [html, setHtml] = useState<string | null>(null);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    Promise.resolve(renderToString(template))
      .then((rendered) => {
        setHtml(rendered);
        setError(null);
      })
      .catch((e) => {
        setHtml(null);
        setError(new Error(e));
      });
  }, [template]);

  return (
    <>
      {!!html ? (
        <InlineFrame responsive srcDoc={html} />
      ) : !!error ? (
        <p>Something went wrong...</p>
      ) : (
        <p>Loading...</p>
      )}
    </>
  );
}

[gabrielmfern]

Should be fixed in @react-email/render@1.1.2/@react-email/render@1.1.2

[wottpal]

Nope, unfortunately still not working in Trigger.dev node environment. – Shall I open a new issue?

… Pinning to v1.0.2 again!

[trigger] ○ May 14, 17:47:25.417 ->  20250514.8 | emails/magic-link | run_t7qhonmf2ymm5f5hk49ps.1
[trigger] ○ May 14, 17:47:26.228 ->  20250514.8 | emails/magic-link | run_t7qhonmf2ymm5f5hk49ps.1 | Error (retrying skipped) (773.4ms)
[trigger] 
[trigger] TypeError: reactDOMServer.renderToPipeableStream is not a function
[trigger] at __spreadValues.selectors (file:///[…]/node_modules/resend/node_modules/@react-email/render/dist/node/index.mjs:162:37)
[trigger] at new Promise (<anonymous>)
[trigger] at file:///[…]/node_modules/resend/node_modules/@react-email/render/dist/node/index.mjs:161:11
[trigger] at Generator.next (<anonymous>)
[trigger] at fulfilled (file:///[…]/node_modules/resend/node_modules/@react-email/render/dist/node/index.mjs:24:24)
[trigger]