fix(render): reactDOMServer import on browser and some bundlers (#2221)

Co-authored-by: gabriel miranda <[email protected]>

Author: MendyLanda

.changeset/free-sides-grin.md

@@ -0,0 +1,5 @@
+---
+"@react-email/render": patch
+---
+
+fix react-dom/server import for the browser and some bundlers

packages/render/src/browser/render.tsx

@@ -48,9 +48,15 @@ const readStream = async (
   return decoder.decode(mergedChunks);
 };
 
-export const render = async (node: React.ReactNode, options?: Options) => {
+export const render = async (
+  node: React.ReactNode,
+  options?: Options,
+) => {
   const suspendedElement = <Suspense>{node}</Suspense>;
-  const reactDOMServer = await import('react-dom/server');
+  const reactDOMServer = await import('react-dom/server').then(
+    // This is beacuse react-dom/server is CJS
+    (m) => m.default,
+  );
 
   let html!: string;
   if (Object.hasOwn(reactDOMServer, 'renderToReadableStream')) {

packages/render/src/node/render.tsx

@@ -5,9 +5,15 @@ import { plainTextSelectors } from '../shared/plain-text-selectors';
 import { pretty } from '../shared/utils/pretty';
 import { readStream } from './read-stream';
 
-export const render = async (node: React.ReactNode, options?: Options) => {
+export const render = async (
+  node: React.ReactNode,
+  options?: Options,
+) => {
   const suspendedElement = <Suspense>{node}</Suspense>;
-  const reactDOMServer = await import('react-dom/server');
+  const reactDOMServer = await import('react-dom/server').then(
+    // This is beacuse react-dom/server is CJS
+    (m) => m.default,
+  );
 
   let html!: string;
   if (Object.hasOwn(reactDOMServer, 'renderToReadableStream')) {