fix: dynamic import issues with esbuild

src/batch/batch.ts

@@ -1,5 +1,6 @@
 import type { EmailApiOptions } from '../common/interfaces/email-api-options.interface';
 import { parseEmailToApiOptions } from '../common/utils/parse-email-to-api-options';
+import { render } from '../render';
 import type { Resend } from '../resend';
 import type {
   CreateBatchOptions,
@@ -9,7 +10,6 @@ import type {
 } from './interfaces/create-batch-options.interface';
 
 export class Batch {
-  private renderAsync?: (component: React.ReactElement) => Promise<string>;
   constructor(private readonly resend: Resend) {}
 
   async send<Options extends CreateBatchRequestOptions>(
@@ -27,18 +27,7 @@ export class Batch {
 
     for (const email of payload) {
       if (email.react) {
-        if (!this.renderAsync) {
-          try {
-            const { renderAsync } = await import('@react-email/render');
-            this.renderAsync = renderAsync;
-          } catch {
-            throw new Error(
-              'Failed to render React component. Make sure to install `@react-email/render`',
-            );
-          }
-        }
-
-        email.html = await this.renderAsync(email.react as React.ReactElement);
+        email.html = await render(email.react);
         email.react = undefined;
       }
 

src/broadcasts/broadcasts.ts

@@ -1,5 +1,5 @@
-import type * as React from 'react';
 import { buildPaginationQuery } from '../common/utils/build-pagination-query';
+import { render } from '../render';
 import type { Resend } from '../resend';
 import type {
   CreateBroadcastOptions,
@@ -30,28 +30,14 @@ import type {
 } from './interfaces/update-broadcast.interface';
 
 export class Broadcasts {
-  private renderAsync?: (component: React.ReactElement) => Promise<string>;
   constructor(private readonly resend: Resend) {}
 
   async create(
     payload: CreateBroadcastOptions,
     options: CreateBroadcastRequestOptions = {},
   ): Promise<SendBroadcastResponse> {
     if (payload.react) {
-      if (!this.renderAsync) {
-        try {
-          const { renderAsync } = await import('@react-email/render');
-          this.renderAsync = renderAsync;
-        } catch {
-          throw new Error(
-            'Failed to render React component. Make sure to install `@react-email/render`',
-          );
-        }
-      }
-
-      payload.html = await this.renderAsync(
-        payload.react as React.ReactElement,
-      );
+      payload.html = await render(payload.react);
     }
 
     const data = await this.resend.post<SendBroadcastResponseSuccess>(
@@ -113,20 +99,7 @@ export class Broadcasts {
     payload: UpdateBroadcastOptions,
   ): Promise<UpdateBroadcastResponse> {
     if (payload.react) {
-      if (!this.renderAsync) {
-        try {
-          const { renderAsync } = await import('@react-email/render');
-          this.renderAsync = renderAsync;
-        } catch {
-          throw new Error(
-            'Failed to render React component. Make sure to install `@react-email/render`',
-          );
-        }
-      }
-
-      payload.html = await this.renderAsync(
-        payload.react as React.ReactElement,
-      );
+      payload.html = await render(payload.react);
     }
 
     const data = await this.resend.patch<UpdateBroadcastResponseSuccess>(

src/emails/emails.ts

@@ -1,6 +1,7 @@
 import type * as React from 'react';
 import { buildPaginationQuery } from '../common/utils/build-pagination-query';
 import { parseEmailToApiOptions } from '../common/utils/parse-email-to-api-options';
+import { render } from '../render';
 import type { Resend } from '../resend';
 import type {
   CancelEmailResponse,
@@ -28,7 +29,6 @@ import type {
 } from './interfaces/update-email-options.interface';
 
 export class Emails {
-  private renderAsync?: (component: React.ReactElement) => Promise<string>;
   constructor(private readonly resend: Resend) {}
 
   async send(
@@ -43,20 +43,7 @@ export class Emails {
     options: CreateEmailRequestOptions = {},
   ): Promise<CreateEmailResponse> {
     if (payload.react) {
-      if (!this.renderAsync) {
-        try {
-          const { renderAsync } = await import('@react-email/render');
-          this.renderAsync = renderAsync;
-        } catch {
-          throw new Error(
-            'Failed to render React component. Make sure to install `@react-email/render`',
-          );
-        }
-      }
-
-      payload.html = await this.renderAsync(
-        payload.react as React.ReactElement,
-      );
+      payload.html = await render(payload.react as React.ReactElement);
     }
 
     const data = await this.resend.post<CreateEmailResponseSuccess>(

src/render.ts

@@ -0,0 +1,18 @@
+export function render(node: React.ReactNode) {
+  return new Promise<string>((resolve, reject) => {
+    // we don't use async here, because tsup transpiles it to
+    // using a generator syntax that, if used in conjunction
+    // with a bundler on the user's side, breaks these try-catch shenanigans
+    import('@react-email/render')
+      .then(({ render }) => {
+        resolve(render(node));
+      })
+      .catch(() => {
+        reject(
+          Error(
+            'Failed to render React component. Make sure to install `@react-email/render`',
+          ),
+        );
+      });
+  });
+}