feat: Use dynamic import for @react-email/render (#438)

Author: vcapretz

package.json

@@ -1,6 +1,6 @@
 {
   "name": "resend",
-  "version": "4.0.0",
+  "version": "4.0.1-alpha.0",
   "description": "Node.js library for the Resend API",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -42,7 +42,7 @@
   },
   "homepage": "https://github.com/resendlabs/resend-node#readme",
   "dependencies": {
-    "@react-email/render": "0.0.17"
+    "@react-email/render": "1.0.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",

pnpm-lock.yaml

@@ -1,4 +1,3 @@
-import { renderAsync } from '@react-email/render';
 import type * as React from 'react';
 import type { Resend } from '../resend';
 import type {
@@ -9,6 +8,7 @@ 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(
@@ -24,9 +24,19 @@ export class Batch {
   ): Promise<CreateBatchResponse> {
     for (const email of payload) {
       if (email.react) {
-        email.html = await renderAsync(email.react as React.ReactElement);
-        // biome-ignore lint/performance/noDelete: <explanation>
-        delete email.react;
+        if (!this.renderAsync) {
+          try {
+            const { renderAsync } = await import('@react-email/render');
+            this.renderAsync = renderAsync;
+          } catch (error) {
+            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.react = undefined;
       }
     }
 

src/batch/batch.ts

@@ -1,4 +1,3 @@
-import { renderAsync } from '@react-email/render';
 import type * as React from 'react';
 import type { Resend } from '../resend';
 import type {
@@ -22,6 +21,7 @@ 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(
@@ -36,9 +36,20 @@ export class Emails {
     options: CreateEmailRequestOptions = {},
   ): Promise<CreateEmailResponse> {
     if (payload.react) {
-      payload.html = await renderAsync(payload.react as React.ReactElement);
-      // biome-ignore lint/performance/noDelete: <explanation>
-      delete payload.react;
+      if (!this.renderAsync) {
+        try {
+          const { renderAsync } = await import('@react-email/render');
+          this.renderAsync = renderAsync;
+        } catch (error) {
+          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,
+      );
     }
 
     const data = await this.resend.post<CreateEmailResponseSuccess>(