react-email 2.1.2 → 2.1.3-canary.0

package/cli/index.js

@@ -340,7 +340,7 @@ var import_commander = require("commander");
 // package.json
 var package_default = {
     name: "react-email",
-    version: "2.1.2",
+    version: "2.1.3-canary.0",
     description: "A live preview of your emails right in your browser.",
     bin: {
         email: "./cli/index.js"
@@ -373,9 +373,8 @@ var package_default = {
         "@radix-ui/react-popover": "1.0.7",
         "@radix-ui/react-slot": "1.0.2",
         "@radix-ui/react-toggle-group": "1.0.4",
-        "@radix-ui/react-tooltip": "1.0.6",
-        "@react-email/components": "0.0.17",
-        "@react-email/render": "0.0.13",
+        "@radix-ui/react-tooltip": "1.0.7",
+        "@react-email/render": "0.0.14-canary.0",
         "@swc/core": "1.3.101",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
@@ -394,10 +393,10 @@ var package_default = {
         glob: "10.3.4",
         "log-symbols": "4.1.0",
         "mime-types": "2.1.35",
-        next: "14.1.0",
+        next: "14.1.4",
         "normalize-path": "3.0.0",
         ora: "5.4.1",
-        postcss: "8.4.35",
+        postcss: "8.4.38",
         "prism-react-renderer": "2.1.0",
         react: "^18.2.0",
         "react-dom": "^18.2.0",
@@ -420,9 +419,8 @@ var package_default = {
         "@vercel/style-guide": "5.1.0",
         eslint: "8.50.0",
         tsup: "7.2.0",
-        tsx: "4.7.1",
-        vitest: "1.1.3",
-        watch: "1.0.2"
+        tsx: "4.9.0",
+        vitest: "1.1.3"
     }
 };
 // src/cli/commands/dev.ts
@@ -1405,7 +1403,7 @@ var import_node_fs3 = require("fs");
 var import_mime_types = require("mime-types");
 var serveStaticFile = function() {
     var _ref = _async_to_generator(function(res, parsedUrl, staticDirRelativePath) {
-        var staticBaseDir, pathname, ext, fileAbsolutePath, doesFileExist, fileStat, fileData;
+        var staticBaseDir, pathname, ext, fileAbsolutePath, fileHandle, fileData, exception;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
@@ -1413,37 +1411,47 @@ var serveStaticFile = function() {
                     pathname = parsedUrl.pathname;
                     ext = import_node_path4.default.parse(pathname).ext;
                     fileAbsolutePath = import_node_path4.default.join(staticBaseDir, pathname);
-                    doesFileExist = (0, import_node_fs3.existsSync)(fileAbsolutePath);
-                    if (!!doesFileExist) return [
-                        3,
-                        1
-                    ];
-                    res.statusCode = 404;
-                    res.end("File ".concat(pathname, " not found!"));
-                    return [
-                        3,
-                        4
-                    ];
-                case 1:
                     return [
                         4,
-                        import_node_fs3.promises.stat(fileAbsolutePath)
+                        import_node_fs3.promises.open(fileAbsolutePath, "r")
                     ];
+                case 1:
+                    fileHandle = _state.sent();
+                    _state.label = 2;
                 case 2:
-                    fileStat = _state.sent();
-                    if (fileStat.isDirectory()) {
-                        fileAbsolutePath += "/index".concat(ext);
-                    }
+                    _state.trys.push([
+                        2,
+                        4,
+                        5,
+                        6
+                    ]);
                     return [
                         4,
-                        import_node_fs3.promises.readFile(fileAbsolutePath)
+                        import_node_fs3.promises.readFile(fileHandle)
                     ];
                 case 3:
                     fileData = _state.sent();
                     res.setHeader("Content-type", (0, import_mime_types.lookup)(ext) || "text/plain");
                     res.end(fileData);
-                    _state.label = 4;
+                    return [
+                        3,
+                        6
+                    ];
                 case 4:
+                    exception = _state.sent();
+                    console.error("Could not read file at ".concat(fileAbsolutePath, " to be served, here's the exception:"), exception);
+                    res.statusCode = 500;
+                    res.end("Could not read file to be served! Check your terminal for more information.");
+                    return [
+                        3,
+                        6
+                    ];
+                case 5:
+                    fileHandle.close();
+                    return [
+                        7
+                    ];
+                case 6:
                     return [
                         2
                     ];
@@ -1699,6 +1707,9 @@ var isFileAnEmail = function(fullPath) {
         ".tsx",
         ".jsx"
     ].includes(ext)) return false;
+    if (!import_node_fs5.default.existsSync(fullPath)) {
+        return false;
+    }
     var fileContents = import_node_fs5.default.readFileSync(fullPath, "utf8");
     return /\bexport\s+default\b/gm.test(fileContents);
 };
@@ -1968,7 +1979,7 @@ var setNextEnvironmentVariablesForBuild = function() {
                     import_node_path8.default.normalize(emailsDirRelativePath), "PLACEHOLDER", "PLACEHOLDER")), {
                         NEXT_PUBLIC_IS_BUILDING: "true"
                     });
-                    nextConfigContents = "\nconst path = require('path');\n/** @type {import('next').NextConfig} */\nmodule.exports = {\n  env: {\n    ...".concat(JSON.stringify(envVariables), ",\n    NEXT_PUBLIC_USER_PROJECT_LOCATION: path.resolve(process.cwd(), '../'),\n    NEXT_PUBLIC_CLI_PACKAGE_LOCATION: process.cwd(),\n  },\n  // this is needed so that the code for building emails works properly\n  webpack: (\n    /** @type {import('webpack').Configuration & { externals: string[] }} */\n    config,\n    { isServer }\n  ) => {\n    if (isServer) {\n      config.externals.push('esbuild');\n    }\n\n    return config;\n  },\n  typescript: {\n    ignoreBuildErrors: true\n  },\n  eslint: {\n    ignoreDuringBuilds: true\n  },\n  experimental: {\n    webpackBuildWorker: true,\n    serverComponentsExternalPackages: [\n      '@react-email/components',\n      '@react-email/render',\n      '@react-email/tailwind',\n    ],\n  },\n}");
+                    nextConfigContents = "\nconst path = require('path');\n/** @type {import('next').NextConfig} */\nmodule.exports = {\n  env: {\n    ...".concat(JSON.stringify(envVariables), ",\n    NEXT_PUBLIC_USER_PROJECT_LOCATION: path.resolve(process.cwd(), '../'),\n    NEXT_PUBLIC_CLI_PACKAGE_LOCATION: process.cwd(),\n  },\n  // this is needed so that the code for building emails works properly\n  webpack: (\n    /** @type {import('webpack').Configuration & { externals: string[] }} */\n    config,\n    { isServer }\n  ) => {\n    if (isServer) {\n      config.externals.push('esbuild');\n    }\n\n    return config;\n  },\n  typescript: {\n    ignoreBuildErrors: true\n  },\n  eslint: {\n    ignoreDuringBuilds: true\n  },\n  experimental: {\n    webpackBuildWorker: true\n  },\n}");
                     return [
                         4,
                         import_node_fs7.default.promises.writeFile(import_node_path8.default.resolve(builtPreviewAppPath, "./next.config.js"), nextConfigContents, "utf8")
@@ -2019,7 +2030,7 @@ var forceSSGForEmailPreviews = function() {
                     });
                     return [
                         4,
-                        import_node_fs7.default.promises.appendFile(import_node_path8.default.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"), "\n\nexport async function generateStaticParams() { \n  return ".concat(JSON.stringify(parameters), ";\n}"), "utf8")
+                        import_node_fs7.default.promises.appendFile(import_node_path8.default.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"), "\n\nexport function generateStaticParams() { \n  return Promise.resolve(\n    ".concat(JSON.stringify(parameters), "\n  );\n}"), "utf8")
                     ];
                 case 2:
                     _state.sent();
@@ -2051,6 +2062,8 @@ var updatePackageJson = function() {
                     ]);
                     packageJson.scripts.build = "next build";
                     packageJson.scripts.start = "next start";
+                    packageJson.name = "preview-server";
+                    delete packageJson.dependencies["@react-email/render"];
                     packageJson.dependencies.sharp = "0.33.2";
                     return [
                         4,

package/cli/index.mjs

@@ -13,7 +13,7 @@ import { program } from "commander";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "2.1.2",
+  version: "2.1.3-canary.0",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./cli/index.js"
@@ -46,9 +46,8 @@ var package_default = {
     "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-toggle-group": "1.0.4",
-    "@radix-ui/react-tooltip": "1.0.6",
-    "@react-email/components": "0.0.17",
-    "@react-email/render": "0.0.13",
+    "@radix-ui/react-tooltip": "1.0.7",
+    "@react-email/render": "0.0.14-canary.0",
     "@swc/core": "1.3.101",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
@@ -67,10 +66,10 @@ var package_default = {
     glob: "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
-    next: "14.1.0",
+    next: "14.1.4",
     "normalize-path": "3.0.0",
     ora: "5.4.1",
-    postcss: "8.4.35",
+    postcss: "8.4.38",
     "prism-react-renderer": "2.1.0",
     react: "^18.2.0",
     "react-dom": "^18.2.0",
@@ -93,9 +92,8 @@ var package_default = {
     "@vercel/style-guide": "5.1.0",
     eslint: "8.50.0",
     tsup: "7.2.0",
-    tsx: "4.7.1",
-    vitest: "1.1.3",
-    watch: "1.0.2"
+    tsx: "4.9.0",
+    vitest: "1.1.3"
   }
 };
 
@@ -444,25 +442,29 @@ var closeOraOnSIGNIT = (spinner) => {
 
 // src/cli/utils/preview/serve-static-file.ts
 import path4 from "path";
-import { promises as fs3, existsSync } from "fs";
+import { promises as fs3 } from "fs";
 import { lookup } from "mime-types";
 var serveStaticFile = async (res, parsedUrl, staticDirRelativePath) => {
   const staticBaseDir = path4.join(process.cwd(), staticDirRelativePath);
   const pathname = parsedUrl.pathname;
   const ext = path4.parse(pathname).ext;
   let fileAbsolutePath = path4.join(staticBaseDir, pathname);
-  const doesFileExist = existsSync(fileAbsolutePath);
-  if (!doesFileExist) {
-    res.statusCode = 404;
-    res.end(`File ${pathname} not found!`);
-  } else {
-    const fileStat = await fs3.stat(fileAbsolutePath);
-    if (fileStat.isDirectory()) {
-      fileAbsolutePath += `/index${ext}`;
-    }
-    const fileData = await fs3.readFile(fileAbsolutePath);
+  const fileHandle = await fs3.open(fileAbsolutePath, "r");
+  try {
+    const fileData = await fs3.readFile(fileHandle);
     res.setHeader("Content-type", lookup(ext) || "text/plain");
     res.end(fileData);
+  } catch (exception) {
+    console.error(
+      `Could not read file at ${fileAbsolutePath} to be served, here's the exception:`,
+      exception
+    );
+    res.statusCode = 500;
+    res.end(
+      `Could not read file to be served! Check your terminal for more information.`
+    );
+  } finally {
+    fileHandle.close();
   }
 };
 
@@ -651,6 +653,9 @@ var isFileAnEmail = (fullPath) => {
   const { ext } = path7.parse(fullPath);
   if (![".js", ".tsx", ".jsx"].includes(ext))
     return false;
+  if (!fs5.existsSync(fullPath)) {
+    return false;
+  }
   const fileContents = fs5.readFileSync(fullPath, "utf8");
   return /\bexport\s+default\b/gm.test(fileContents);
 };
@@ -883,12 +888,7 @@ module.exports = {
     ignoreDuringBuilds: true
   },
   experimental: {
-    webpackBuildWorker: true,
-    serverComponentsExternalPackages: [
-      '@react-email/components',
-      '@react-email/render',
-      '@react-email/tailwind',
-    ],
+    webpackBuildWorker: true
   },
 }`;
   await fs7.promises.writeFile(
@@ -928,8 +928,10 @@ var forceSSGForEmailPreviews = async (emailsDirPath, builtPreviewAppPath) => {
     path9.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
     `
 
-export async function generateStaticParams() { 
-  return ${JSON.stringify(parameters)};
+export function generateStaticParams() { 
+  return Promise.resolve(
+    ${JSON.stringify(parameters)}
+  );
 }`,
     "utf8"
   );
@@ -941,6 +943,8 @@ var updatePackageJson = async (builtPreviewAppPath) => {
   );
   packageJson.scripts.build = "next build";
   packageJson.scripts.start = "next start";
+  packageJson.name = "preview-server";
+  delete packageJson.dependencies["@react-email/render"];
   packageJson.dependencies.sharp = "0.33.2";
   await fs7.promises.writeFile(
     packageJsonPath,

package/next.config.js

@@ -11,12 +11,5 @@ module.exports = {
     }
 
     return config;
-  },
-  experimental: {
-    serverComponentsExternalPackages: [
-      '@react-email/components',
-      '@react-email/render',
-      '@react-email/tailwind',
-    ],
-  },
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "2.1.2",
+  "version": "2.1.3-canary.0",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./cli/index.js"
@@ -25,9 +25,8 @@
     "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-toggle-group": "1.0.4",
-    "@radix-ui/react-tooltip": "1.0.6",
-    "@react-email/components": "0.0.17",
-    "@react-email/render": "0.0.13",
+    "@radix-ui/react-tooltip": "1.0.7",
+    "@react-email/render": "0.0.14-canary.0",
     "@swc/core": "1.3.101",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
@@ -46,10 +45,10 @@
     "glob": "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
-    "next": "14.1.0",
+    "next": "14.1.4",
     "normalize-path": "3.0.0",
     "ora": "5.4.1",
-    "postcss": "8.4.35",
+    "postcss": "8.4.38",
     "prism-react-renderer": "2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -72,9 +71,8 @@
     "@vercel/style-guide": "5.1.0",
     "eslint": "8.50.0",
     "tsup": "7.2.0",
-    "tsx": "4.7.1",
-    "vitest": "1.1.3",
-    "watch": "1.0.2"
+    "tsx": "4.9.0",
+    "vitest": "1.1.3"
   },
   "scripts": {
     "build": "tsup",

package/src/actions/get-email-path-from-slug.ts

@@ -19,7 +19,7 @@ export const getEmailPathFromSlug = async (slug: string) => {
   }
 
   throw new Error(
-    `Could not find your email file based on the slug by guessing the file extension. Tried .tsx, .jsx and .js.
+    `Could not find your email file based on the slug (${slug}) by guessing the file extension. Tried .tsx, .jsx and .js.
 
     This is most likely not an issue with the preview server. It most likely is that the email doesn't exist.`,
   );

package/src/actions/get-emails-directory-metadata.ts

@@ -12,6 +12,13 @@ const isFileAnEmail = (fullPath: string): boolean => {
 
   if (!['.js', '.tsx', '.jsx'].includes(ext)) return false;
 
+  // This is to avoid a possible race condition where the file doesn't exist anymore
+  // once we are checking if it is an actual email, this couuld cause issues that
+  // would be very hard to debug and find out the why of it happening.
+  if (!fs.existsSync(fullPath)) {
+    return false;
+  }
+
   // check with a heuristic to see if the file has at least
   // a default export
   const fileContents = fs.readFileSync(fullPath, 'utf8');

package/src/actions/render-email-by-path.tsx

@@ -1,6 +1,5 @@
 'use server';
 import fs from 'node:fs';
-import { renderAsync } from '@react-email/render';
 import { getEmailComponent } from '../utils/get-email-component';
 import type { ErrorObject } from '../utils/types/error-object';
 import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
@@ -26,7 +25,11 @@ export const renderEmailByPath = async (
     return { error: result.error };
   }
 
-  const { emailComponent: Email, sourceMapToOriginalFile } = result;
+  const {
+    emailComponent: Email,
+    renderAsync,
+    sourceMapToOriginalFile,
+  } = result;
 
   const previewProps = Email.PreviewProps || {};
   const EmailComponent = Email as React.FC;

package/src/app/preview/[...slug]/page.tsx

@@ -1,4 +1,6 @@
 import { Suspense } from 'react';
+import path from 'node:path';
+import { redirect } from 'next/navigation';
 import { getEmailPathFromSlug } from '../../../actions/get-email-path-from-slug';
 import { getEmailsDirectoryMetadata } from '../../../actions/get-emails-directory-metadata';
 import { renderEmailByPath } from '../../../actions/render-email-by-path';
@@ -12,7 +14,7 @@ export interface PreviewParams {
   slug: string[];
 }
 
-export default async function Page({ params }: { params: PreviewParams }) {
+const Page = async ({ params }: { params: PreviewParams }) => {
   // will come in here as segments of a relative path to the email
   // ex: ['authentication', 'verify-password.tsx']
   const slug = params.slug.join('/');
@@ -28,7 +30,16 @@ This is most likely not an issue with the preview server. Maybe there was a typo
     );
   }
 
-  const emailPath = await getEmailPathFromSlug(slug);
+  let emailPath: string;
+  try {
+    emailPath = await getEmailPathFromSlug(slug);
+  } catch (exception) {
+    if (exception instanceof Error) {
+      console.warn(exception.message);
+      redirect('/');
+    }
+    throw exception;
+  }
 
   const emailRenderingResult = await renderEmailByPath(emailPath);
 
@@ -53,8 +64,10 @@ This is most likely not an issue with the preview server. Maybe there was a typo
       />
     </Suspense>
   );
-}
+};
 
 export function generateMetadata({ params }: { params: PreviewParams }) {
-  return { title: `${params.slug.join('/')} — React Email` };
+  return { title: `${path.basename(params.slug.join('/'))} — React Email` };
 }
+
+export default Page;

package/src/components/topbar.tsx

@@ -11,6 +11,7 @@ import { IconPhone } from './icons/icon-phone';
 import { IconSource } from './icons/icon-source';
 import { Send } from './send';
 import { Tooltip } from './tooltip';
+import { pathSeparator } from '../utils/emails-directory-absolute-path';
 
 interface TopbarProps {
   currentEmailOpenSlug: string;
@@ -49,7 +50,7 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
 
         <div className="items-center overflow-hidden hidden lg:flex text-center absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
           <Heading as="h2" className="truncate" size="2" weight="medium">
-            {currentEmailOpenSlug}
+            {currentEmailOpenSlug.split(pathSeparator).pop()}
           </Heading>
         </div>
 

package/src/utils/__snapshots__/get-email-component.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`getEmailComponent() with a demo email template 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div>Hello <!-- -->Gabriel<!-- -->!</div>"`;

package/src/utils/get-email-component.spec.ts

@@ -0,0 +1,25 @@
+import path from 'node:path';
+import * as React from 'react';
+import { getEmailComponent } from './get-email-component';
+
+test('getEmailComponent() with a demo email template', async () => {
+  const result = await getEmailComponent(
+    path.resolve(__dirname, './testing/email-template.tsx'),
+  );
+
+  if ('error' in result) {
+    console.log(result.error);
+    expect('error' in result).toBe(false);
+  } else {
+    expect(result.emailComponent).toBeTruthy();
+    expect(result.sourceMapToOriginalFile).toBeTruthy();
+
+    const emailHtml = await result.renderAsync(
+      React.createElement(
+        result.emailComponent,
+        result.emailComponent.PreviewProps,
+      ),
+    );
+    expect(emailHtml).toMatchSnapshot();
+  }
+});

package/src/utils/get-email-component.ts

@@ -1,8 +1,16 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import path from 'node:path';
 import vm from 'node:vm';
+import fs from 'node:fs/promises';
 import { type RawSourceMap } from 'source-map-js';
-import { type OutputFile, build, type BuildFailure } from 'esbuild';
+import {
+  type OutputFile,
+  build,
+  type ResolveOptions,
+  type BuildFailure,
+  type Loader,
+} from 'esbuild';
+import type { renderAsync } from '@react-email/render';
 import type { EmailTemplate as EmailComponent } from './types/email-template';
 import type { ErrorObject } from './types/error-object';
 import { improveErrorWithSourceMap } from './improve-error-with-sourcemap';
@@ -14,6 +22,8 @@ export const getEmailComponent = async (
   | {
       emailComponent: EmailComponent;
 
+      renderAsync: typeof renderAsync;
+
       sourceMapToOriginalFile: RawSourceMap;
     }
   | { error: ErrorObject }
@@ -23,8 +33,49 @@ export const getEmailComponent = async (
     const buildData = await build({
       bundle: true,
       entryPoints: [emailPath],
+      plugins: [
+        {
+          name: 'add-export-for-render-async',
+          setup(b) {
+            b.onLoad(
+              { filter: new RegExp(path.basename(emailPath)) },
+              async () => ({
+                contents: `${await fs.readFile(emailPath, 'utf8')};
+                  export { renderAsync } from 'react-email-module-that-will-export-render'
+                `,
+                loader: path.extname(emailPath).slice(1) as Loader,
+              }),
+            );
+
+            b.onResolve(
+              { filter: /^react-email-module-that-will-export-render$/ },
+              async (args) => {
+                const options: ResolveOptions = {
+                  kind: 'import-statement',
+                  importer: args.importer,
+                  resolveDir: args.resolveDir,
+                  namespace: args.namespace,
+                };
+                let result = await b.resolve('@react-email/render', options);
+                if (result.errors.length === 0) {
+                  return result;
+                }
+
+                // If @react-email/render does not exist, resolve to @react-email/components
+                result = await b.resolve('@react-email/components', options);
+                if (result.errors.length > 0) {
+                  result.errors[0]!.text =
+                    "Failed trying to import `renderAsync` from either `@react-email/render` or `@react-email/components` to be able to render your email template.\n Maybe you don't have either of them installed?";
+                }
+                return result;
+              },
+            );
+          },
+        },
+      ],
       platform: 'node',
       write: false,
+
       format: 'cjs',
       jsx: 'automatic',
       logLevel: 'silent',
@@ -62,8 +113,15 @@ export const getEmailComponent = async (
     TextEncoderStream,
     ReadableStream,
     URL,
-    module: { exports: { default: undefined as unknown } },
-    __filanem: emailPath,
+    URLSearchParams,
+    Headers,
+    module: {
+      exports: {
+        default: undefined as unknown,
+        renderAsync: undefined as unknown,
+      },
+    },
+    __filename: emailPath,
     __dirname: path.dirname(emailPath),
     require: (module: string) => {
       if (module in staticNodeModulesForVM) {
@@ -71,7 +129,7 @@ export const getEmailComponent = async (
         return staticNodeModulesForVM[module];
       }
 
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-useless-template-literals
       return require(`${module}`) as unknown;
       // this stupid string templating was necessary to not have
       // webpack warnings like:
@@ -85,11 +143,18 @@ export const getEmailComponent = async (
     process,
   };
   const sourceMapToEmail = JSON.parse(sourceMapFile.text) as RawSourceMap;
+  // because it will have a path like <tsconfigLocation>/stdout/email.js.map
+  sourceMapToEmail.sourceRoot = path.resolve(sourceMapFile.path, '../..');
+  sourceMapToEmail.sources = sourceMapToEmail.sources.map((source) =>
+    path.resolve(sourceMapFile.path, '..', source),
+  );
   try {
     vm.runInNewContext(builtEmailCode, fakeContext, { filename: emailPath });
   } catch (exception) {
     const error = exception as Error;
 
+    error.stack &&= error.stack.split('at Script.runInContext (node:vm')[0];
+
     return {
       error: improveErrorWithSourceMap(error, emailPath, sourceMapToEmail),
     };
@@ -109,6 +174,8 @@ export const getEmailComponent = async (
 
   return {
     emailComponent: fakeContext.module.exports.default as EmailComponent,
+    renderAsync: fakeContext.module.exports.renderAsync as typeof renderAsync,
+
     sourceMapToOriginalFile: sourceMapToEmail,
   };
 };