fix: builds errors with esbuild and react-dom@18 (#2436)

.changeset/shy-moons-smell.md

@@ -0,0 +1,5 @@
+---
+"@react-email/render": patch
+---
+
+fix builds failing with esbuild and react-dom@18

packages/render/src/edge/import-react-dom.tsx

@@ -1,8 +1,11 @@
-export const importReactDOM = async () => {
-  try {
-    return await import('react-dom/server.edge');
-  } catch (_exception) {
-    // This ensures that we still have compatibiltity with React 18, which doesn't have the `edge` conditional export.
-    return await import('react-dom/server');
-  }
+export const importReactDom = () => {
+  // We don't use async here because tsup converts it to a generator syntax
+  // that esbuild doesn't understand as dealing with the import failing during
+  // bundling: https://github.com/evanw/esbuild/issues/3216#issuecomment-1628913722
+  return import('react-dom/server.edge').catch(
+    () =>
+      // This ensures that we still have compatibility with React 18,
+      // which doesn't have the `.edge` export.
+      import('react-dom/server'),
+  );
 };

packages/render/src/edge/render.tsx

@@ -3,15 +3,15 @@ import { pretty } from '../node';
 import type { Options } from '../shared/options';
 import { readStream } from '../shared/read-stream.browser';
 import { toPlainText } from '../shared/utils/to-plain-text';
-import { importReactDOM } from './import-react-dom';
+import { importReactDom } from './import-react-dom';
 
 export const render = async (
   element: React.ReactElement,
   options?: Options,
 ) => {
   const suspendedElement = <Suspense>{element}</Suspense>;
-  const reactDOMServer = await importReactDOM().then(
-    // This is beacuse react-dom/server is CJS
+  const reactDOMServer = await importReactDom().then(
+    // This is because react-dom/server is CJS
     (m) => m.default,
   );