fix(render): lazy-load prettier so it's only loaded when pretty is used (#3790)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: AmineBenzaazaa

.changeset/render-lazy-load-prettier.md

@@ -0,0 +1,5 @@
+---
+"@react-email/render": patch
+---
+
+`render` now only loads `prettier` when `pretty: true` is used, so rendering without it no longer fails with "Failed to load external module prettier" in Next.js dev with Turbopack on Bun

packages/render/src/shared/utils/pretty.spec.ts

@@ -184,4 +184,25 @@ describe('pretty', () => {
       "
     `);
   });
+
+  it('only loads prettier once pretty is called', async () => {
+    vi.resetModules();
+    const loadStandalone = vi.fn();
+    vi.doMock('prettier/standalone', async (importOriginal) => {
+      loadStandalone();
+      return importOriginal();
+    });
+
+    try {
+      const { pretty: lazyPretty } = await import('./pretty');
+      expect(loadStandalone).not.toHaveBeenCalled();
+
+      expect(await lazyPretty('<div><p>Hello</p></div>')).toBe(
+        '<div><p>Hello</p></div>\n',
+      );
+      expect(loadStandalone).toHaveBeenCalledOnce();
+    } finally {
+      vi.doUnmock('prettier/standalone');
+    }
+  });
 });

packages/render/src/shared/utils/pretty.ts

@@ -1,7 +1,5 @@
 import type { Options, Plugin } from 'prettier';
 import type { builders } from 'prettier/doc';
-import * as html from 'prettier/plugins/html';
-import { format } from 'prettier/standalone';
 
 interface HtmlNode {
   type?: 'element' | 'text' | 'ieConditionalComment';
@@ -86,46 +84,70 @@ function recursivelyMapDoc(
   return callback(doc);
 }
 
-const modifiedHtml = { ...html } as Plugin;
-if (modifiedHtml.printers) {
-  const previousPrint = modifiedHtml.printers.html.print;
-  modifiedHtml.printers.html.print = (path, options, print, args) => {
-    const node = getHtmlNode(
-      path as Parameters<NonNullable<Plugin['printers']>['html']['print']>[0],
-    );
-
-    const rawPrintingResult = previousPrint(path, options, print, args);
-
-    if (
-      node?.type === 'ieConditionalComment' ||
-      node?.kind === 'ieConditionalComment'
-    ) {
-      const printingResult = recursivelyMapDoc(rawPrintingResult, (doc) => {
-        if (typeof doc === 'object' && doc.type === 'line') {
-          return doc.soft ? '' : ' ';
-        }
-
-        return doc;
-      });
-
-      return printingResult;
-    }
+function createModifiedHtmlPlugin(html: Plugin): Plugin {
+  const modifiedHtml = { ...html };
+  if (modifiedHtml.printers) {
+    const previousPrint = modifiedHtml.printers.html.print;
+    modifiedHtml.printers.html.print = (path, options, print, args) => {
+      const node = getHtmlNode(
+        path as Parameters<NonNullable<Plugin['printers']>['html']['print']>[0],
+      );
+
+      const rawPrintingResult = previousPrint(path, options, print, args);
+
+      if (
+        node?.type === 'ieConditionalComment' ||
+        node?.kind === 'ieConditionalComment'
+      ) {
+        const printingResult = recursivelyMapDoc(rawPrintingResult, (doc) => {
+          if (typeof doc === 'object' && doc.type === 'line') {
+            return doc.soft ? '' : ' ';
+          }
+
+          return doc;
+        });
+
+        return printingResult;
+      }
 
-    return rawPrintingResult;
-  };
+      return rawPrintingResult;
+    };
+  }
+
+  return modifiedHtml;
 }
 
+const importPrettier = async () => {
+  const [{ format }, html] = await Promise.all([
+    import('prettier/standalone'),
+    import('prettier/plugins/html'),
+  ]);
+
+  return { format, html: createModifiedHtmlPlugin(html as Plugin) };
+};
+
+/**
+ * Prettier is only loaded the first time `pretty` is called, so importing
+ * `render` doesn't load it when `pretty` is never used. This also keeps
+ * bundlers that externalize `prettier` (e.g. Next.js with Turbopack) from
+ * trying to resolve it at runtime unless it's actually needed.
+ */
+let prettierPromise: ReturnType<typeof importPrettier> | undefined;
+
 const defaults: Options = {
   endOfLine: 'lf',
   tabWidth: 2,
-  plugins: [modifiedHtml],
   bracketSameLine: true,
   parser: 'html',
 };
 
-export const pretty = (str: string, options: Options = {}) => {
+export const pretty = async (str: string, options: Options = {}) => {
+  prettierPromise ??= importPrettier();
+  const { format, html } = await prettierPromise;
+
   return format(str.replaceAll('\0', ''), {
     ...defaults,
+    plugins: [html],
     ...options,
   });
 };