fixup! fixup! Upgrade to Next.js@15 and React@19

Author: Vinnl

jest.setup.ts

@@ -40,6 +40,22 @@ global.IntersectionObserver = jest.fn();
 defaultFallbackInView(false);
 beforeEach(() => {
   setupIntersectionMocking(jest.fn);
+
+  // react-dom/server.edge is apparently needed instead of react-dom/server
+  // to avoid this error:
+  // > Uncaught ReferenceError: MessageChannel is not defined
+  // See https://github.com/jsdom/jsdom/issues/2448#issuecomment-1581009331
+  window.MessageChannel = jest.fn().mockImplementation(() => {
+    return {
+      port1: {
+        postMessage: jest.fn(),
+      },
+      port2: {
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      },
+    };
+  });
 });
 afterEach(() => {
   resetIntersectionMocking();

src/emails/renderEmail.ts

@@ -4,46 +4,19 @@
 
 import "../app/functions/server/notInClientComponent";
 import mjml2html from "mjml";
-import { Transform } from "node:stream";
 import { ReactNode } from "react";
 
 export async function renderEmail(emailTemplate: ReactNode): Promise<string> {
-  return mjml2html(await renderToString(emailTemplate), {
-    validationLevel: "strict",
-    beautify: false,
-    minify: false,
-    ignoreIncludes: true,
-  }).html;
-}
-
-async function renderToString(node: ReactNode): Promise<string> {
   // Importing react-dom/server dynamically here is a workaround for the following error:
   //
   //    Error: react-dom/server is not supported in React Server Components.
   //
   // https://github.com/vercel/next.js/issues/43810#issuecomment-2437931415
-  const { renderToPipeableStream } = await import("react-dom/server");
-  // It looks like we can't use `renderToStaticMarkup`, as that results in the following 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.
-  //
-  // Hence this `renderToPipeableStream` mess.
-  const { pipe } = renderToPipeableStream(node);
-  return new Promise((resolve, reject) => {
-    const parts: string[] = [];
-    // It's not clear to me if there's a better to `pipe` a rendered `node` to a string,
-    // but this works and at this point I'm fed up, so leaving it at this.
-    // Feel free to replace by a better way.
-    const transformer = new Transform({
-      transform: (chunk, encoding, callback) => {
-        callback(null, chunk.toString());
-      },
-    });
-    transformer.on("data", (part) => parts.push(part));
-    transformer.on("error", reject);
-    transformer.on("end", () => {
-      return resolve(parts.join(""));
-    });
-    pipe(transformer);
-  });
+  const { renderToStaticMarkup } = await import("react-dom/server");
+  return mjml2html(renderToStaticMarkup(emailTemplate), {
+    validationLevel: "strict",
+    beautify: false,
+    minify: false,
+    ignoreIncludes: true,
+  }).html;
 }