fix: to support @react-email/render exports across versions in templates

src/emails/emails.ts

@@ -1,4 +1,3 @@
-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';
@@ -53,7 +52,7 @@ export class Emails {
     const body: CreateEmailOptions = { ...payload };
 
     if (payload.react) {
-      body.html = await render(payload.react as React.ReactElement);
+      body.html = await render(payload.react);
     }
 
     const data = await this.resend.post<CreateEmailResponseSuccess>(

src/templates/templates.spec.ts

@@ -16,9 +16,9 @@ import type { UpdateTemplateOptions } from './interfaces/update-template.interfa
 const fetchMocker = createFetchMock(vi);
 fetchMocker.enableMocks();
 
-const mockRenderAsync = vi.fn();
+const mockRender = vi.fn();
 vi.mock('@react-email/render', () => ({
-  renderAsync: mockRenderAsync,
+  render: mockRender,
 }));
 
 const TEST_API_KEY = 're_test_api_key';
@@ -151,7 +151,7 @@ describe('Templates', () => {
         props: { children: 'Welcome!' },
       } as React.ReactElement;
 
-      mockRenderAsync.mockResolvedValueOnce('<div>Welcome!</div>');
+      mockRender.mockResolvedValueOnce('<div>Welcome!</div>');
 
       const payload: CreateTemplateOptions = {
         name: 'Welcome Email',
@@ -181,7 +181,7 @@ describe('Templates', () => {
         }
       `);
 
-      expect(mockRenderAsync).toHaveBeenCalledWith(mockReactComponent);
+      expect(mockRender).toHaveBeenCalledWith(mockReactComponent);
     });
 
     it('creates template with React component and all optional fields', async () => {
@@ -195,7 +195,7 @@ describe('Templates', () => {
         },
       } as React.ReactElement;
 
-      mockRenderAsync.mockResolvedValueOnce(
+      mockRender.mockResolvedValueOnce(
         '<div><h1>Welcome {{{name}}}!</h1><p>Welcome to {{{company}}}.</p></div>',
       );
 
@@ -244,7 +244,7 @@ describe('Templates', () => {
         }
       `);
 
-      expect(mockRenderAsync).toHaveBeenCalledWith(mockReactComponent);
+      expect(mockRender).toHaveBeenCalledWith(mockReactComponent);
     });
 
     it('does not mutate payload when using React component', async () => {
@@ -253,7 +253,7 @@ describe('Templates', () => {
         props: { children: 'Welcome!' },
       } as React.ReactElement;
 
-      mockRenderAsync.mockResolvedValueOnce('<div>Welcome!</div>');
+      mockRender.mockResolvedValueOnce('<div>Welcome!</div>');
 
       const payload: CreateTemplateOptions = {
         name: 'Welcome Email',
@@ -282,7 +282,7 @@ describe('Templates', () => {
       } as React.ReactElement;
 
       // Temporarily clear the mock implementation to simulate module load failure
-      mockRenderAsync.mockImplementationOnce(() => {
+      mockRender.mockImplementationOnce(() => {
         throw new Error(
           'Failed to render React component. Make sure to install `@react-email/render`',
         );

src/templates/templates.ts

@@ -1,6 +1,7 @@
 import type { PaginationOptions } from '../common/interfaces';
 import { getPaginationQueryProperties } from '../common/utils/get-pagination-query-properties';
 import { parseTemplateToApiOptions } from '../common/utils/parse-template-to-api-options';
+import { render } from '../render';
 import type { Resend } from '../resend';
 import { ChainableTemplateResult } from './chainable-template-result';
 import type {
@@ -35,7 +36,6 @@ import type {
 } from './interfaces/update-template.interface';
 
 export class Templates {
-  private renderAsync?: (component: React.ReactElement) => Promise<string>;
   constructor(private readonly resend: Resend) {}
 
   create(
@@ -46,26 +46,15 @@ export class Templates {
   }
   // This creation process is being done separately from the public create so that
   // the user can chain the publish operation after the create operation. Otherwise, due
-  // to the async nature of the renderAsync, the return type would be
+  // to the async nature of the render, the return type would be
   // Promise<ChainableTemplateResult<CreateTemplateResponse>> which wouldn't be chainable.
   private async performCreate(
     payload: CreateTemplateOptions,
   ): Promise<CreateTemplateResponse> {
     const body: CreateTemplateOptions = { ...payload };
 
     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`',
-          );
-        }
-      }
-
-      body.html = await this.renderAsync(payload.react as React.ReactElement);
+      body.html = await render(payload.react);
     }
 
     return this.resend.post<CreateTemplateResponseSuccess>(