fix(render): Issue with ESM due to dyanmic require (#1491)

Author: gabrielmfern

packages/render/package.json

@@ -3,32 +3,74 @@
   "version": "0.0.15",
   "description": "Transform React components into HTML email templates",
   "sideEffects": false,
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/browser/index.js",
+  "module": "./dist/browser/index.mjs",
+  "types": "./dist/browser/index.d.ts",
   "files": [
     "dist/**"
   ],
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
+      "node": {
+        "import": {
+          "types": "./dist/node/index.d.mts",
+          "default": "./dist/node/index.mjs"
+        },
+        "require": {
+          "types": "./dist/node/index.d.ts",
+          "default": "./dist/node/index.js"
+        }
       },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
+      "deno": {
+        "import": {
+          "types": "./dist/browser/index.d.mts",
+          "default": "./dist/browser/index.mjs"
+        },
+        "require": {
+          "types": "./dist/browser/index.d.ts",
+          "default": "./dist/browser/index.js"
+        }
+      },
+      "worker": {
+        "import": {
+          "types": "./dist/browser/index.d.mts",
+          "default": "./dist/browser/index.mjs"
+        },
+        "require": {
+          "types": "./dist/browser/index.d.ts",
+          "default": "./dist/browser/index.js"
+        }
+      },
+      "browser": {
+        "import": {
+          "types": "./dist/browser/index.d.mts",
+          "default": "./dist/browser/index.mjs"
+        },
+        "require": {
+          "types": "./dist/browser/index.d.ts",
+          "default": "./dist/browser/index.js"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./dist/node/index.d.mts",
+          "default": "./dist/node/index.mjs"
+        },
+        "require": {
+          "types": "./dist/node/index.d.ts",
+          "default": "./dist/node/index.js"
+        }
       }
     }
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build": "tsup-node",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
+    "dev": "tsup-node --watch",
     "lint": "eslint .",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",
@@ -57,6 +99,7 @@
     "eslint-config-custom": "workspace:*",
     "jsdom": "23.0.1",
     "tsconfig": "workspace:*",
+    "tsup": "7.2.0",
     "typescript": "5.1.6",
     "vitest": "1.1.2"
   },

packages/render/src/browser/index.ts

@@ -0,0 +1,5 @@
+export * from "../shared/render";
+export * from "./render-async";
+
+export * from "../shared/options";
+export * from "../shared/plain-text-selectors";

packages/render/src/render-async-web.spec.tsx renamed to packages/render/src/browser/render-async-web.spec.tsx

@@ -2,10 +2,14 @@
  * @vitest-environment jsdom
  */
 
-import { Template } from "./utils/template";
-import { Preview } from "./utils/preview";
+import { Template } from "../shared/utils/template";
+import { Preview } from "../shared/utils/preview";
 import { renderAsync } from "./render-async";
 
+type Import = typeof import("react-dom/server") & {
+  default: typeof import("react-dom/server");
+};
+
 describe("renderAsync on the browser environment", () => {
   beforeEach(() => {
     vi.mock(
@@ -20,14 +24,23 @@ describe("renderAsync on the browser environment", () => {
 
   it("converts a React component into HTML with Next 14 error stubs", async () => {
     vi.mock("react-dom/server", async (_importOriginal) => {
-      const ReactDOMServerBrowser = await vi.importActual<
-        typeof import("react-dom/server.browser")
-      >("react-dom/server.browser");
+      const ReactDOMServerBrowser = await vi.importActual<Import>(
+        "react-dom/server.browser",
+      );
       const ERROR_MESSAGE =
         "Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.";
 
       return {
         ...ReactDOMServerBrowser,
+        default: {
+          ...ReactDOMServerBrowser,
+          renderToString() {
+            throw new Error(ERROR_MESSAGE);
+          },
+          renderToStaticMarkup() {
+            throw new Error(ERROR_MESSAGE);
+          },
+        },
         renderToString() {
           throw new Error(ERROR_MESSAGE);
         },

packages/render/src/browser/render-async.ts

@@ -0,0 +1,81 @@
+import { convert } from "html-to-text";
+import type {
+  PipeableStream,
+  ReactDOMServerReadableStream,
+} from "react-dom/server";
+import { pretty } from "../shared/utils/pretty";
+import { plainTextSelectors } from "../shared/plain-text-selectors";
+import type { Options } from "../shared/options";
+
+const decoder = new TextDecoder("utf-8");
+
+const readStream = async (
+  stream: PipeableStream | ReactDOMServerReadableStream,
+) => {
+  let result = "";
+
+  if ("pipeTo" in stream) {
+    // means it's a readable stream
+    const writableStream = new WritableStream({
+      write(chunk: BufferSource) {
+        result += decoder.decode(chunk);
+      },
+    });
+    await stream.pipeTo(writableStream);
+  } else {
+    throw new Error(
+      "For some reason, the Node version of `react-dom/server` has been imported instead of the browser one.",
+      {
+        cause: {
+          stream,
+        },
+      },
+    );
+  }
+
+  return result;
+};
+
+export const renderAsync = async (
+  component: React.ReactElement,
+  options?: Options,
+) => {
+  const { default: reactDOMServer } = await import("react-dom/server");
+
+  let html!: string;
+  if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
+    html = await readStream(
+      await reactDOMServer.renderToReadableStream(component),
+    );
+  } else {
+    await new Promise<void>((resolve, reject) => {
+      const stream = reactDOMServer.renderToPipeableStream(component, {
+        async onAllReady() {
+          html = await readStream(stream);
+          resolve();
+        },
+        onError(error) {
+          reject(error as Error);
+        },
+      });
+    });
+  }
+
+  if (options?.plainText) {
+    return convert(html, {
+      selectors: plainTextSelectors,
+      ...options.htmlToTextOptions,
+    });
+  }
+
+  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.*?>/, "")}`;
+
+  if (options?.pretty) {
+    return pretty(document);
+  }
+
+  return document;
+};

packages/render/src/index.ts

@@ -0,0 +1,5 @@
+export * from "../shared/render";
+export * from "./render-async";
+
+export * from "../shared/options";
+export * from "../shared/plain-text-selectors";

packages/render/src/__snapshots__/render-async-node.spec.tsx.snap renamed to packages/render/src/node/__snapshots__/render-async-node.spec.tsx.snap

@@ -2,22 +2,33 @@
  * @vitest-environment edge-runtime
  */
 
-import { Template } from "./utils/template";
-import { Preview } from "./utils/preview";
+import React from "react";
+import { Template } from "../shared/utils/template";
+import { Preview } from "../shared/utils/preview";
 import { renderAsync } from "./render-async";
 
+type Import = typeof import("react-dom/server") & {
+  default: typeof import("react-dom/server");
+};
+
 describe("renderAsync on the edge", () => {
   it("converts a React component into HTML with Next 14 error stubs", async () => {
     vi.mock("react-dom/server", async () => {
-      const ReactDOMServer =
-        await vi.importActual<typeof import("react-dom/server")>(
-          "react-dom/server",
-        );
+      const ReactDOMServer = await vi.importActual<Import>("react-dom/server");
       const ERROR_MESSAGE =
         "Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.";
 
       return {
         ...ReactDOMServer,
+        default: {
+          ...ReactDOMServer.default,
+          renderToString() {
+            throw new Error(ERROR_MESSAGE);
+          },
+          renderToStaticMarkup() {
+            throw new Error(ERROR_MESSAGE);
+          },
+        },
         renderToString() {
           throw new Error(ERROR_MESSAGE);
         },

packages/render/src/node/index.ts

@@ -4,22 +4,32 @@
 
 import usePromise from "react-promise-suspense";
 import { Suspense } from "react";
-import { Template } from "./utils/template";
-import { Preview } from "./utils/preview";
+import { Template } from "../shared/utils/template";
+import { Preview } from "../shared/utils/preview";
 import { renderAsync } from "./render-async";
 
+type Import = typeof import("react-dom/server") & {
+  default: typeof import("react-dom/server");
+};
+
 describe("renderAsync on node environments", () => {
   it("converts a React component into HTML with Next 14 error stubs", async () => {
     vi.mock("react-dom/server", async () => {
-      const ReactDOMServer =
-        await vi.importActual<typeof import("react-dom/server")>(
-          "react-dom/server",
-        );
+      const ReactDOMServer = await vi.importActual<Import>("react-dom/server");
       const ERROR_MESSAGE =
         "Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.";
 
       return {
         ...ReactDOMServer,
+        default: {
+          ...ReactDOMServer.default,
+          renderToString() {
+            throw new Error(ERROR_MESSAGE);
+          },
+          renderToStaticMarkup() {
+            throw new Error(ERROR_MESSAGE);
+          },
+        },
         renderToString() {
           throw new Error(ERROR_MESSAGE);
         },

packages/render/src/render-async-edge.spec.tsx renamed to packages/render/src/node/render-async-edge.spec.tsx

@@ -1,11 +1,12 @@
+import { Writable } from "node:stream";
 import { convert } from "html-to-text";
 import type {
   PipeableStream,
   ReactDOMServerReadableStream,
 } from "react-dom/server";
-import { pretty } from "./utils/pretty";
-import { plainTextSelectors } from "./plain-text-selectors";
-import type { Options } from "./options";
+import { pretty } from "../shared/utils/pretty";
+import { plainTextSelectors } from "../shared/plain-text-selectors";
+import type { Options } from "../shared/options";
 
 const decoder = new TextDecoder("utf-8");
 
@@ -23,12 +24,6 @@ const readStream = async (
     });
     await stream.pipeTo(writableStream);
   } else {
-    // Using an `await import` here proved to cause issues when running
-    // inside of Node's VM after `esbuild` would have this compiled to CJS.
-    //
-    // See https://github.com/resend/react-email/blob/c56cb71ab61a718ee932048a08b65185daeeafa5/packages/react-email/src/utils/get-email-component.ts
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const { Writable } = require("node:stream") as typeof import("node:stream");
     const writable = new Writable({
       write(chunk: BufferSource, _encoding, callback) {
         result += decoder.decode(chunk);
@@ -53,7 +48,7 @@ export const renderAsync = async (
   component: React.ReactElement,
   options?: Options,
 ) => {
-  const reactDOMServer = await import("react-dom/server");
+  const { default: reactDOMServer } = await import("react-dom/server");
 
   let html!: string;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {