react-email 2.1.3-canary.1 → 2.1.3

package/cli/index.js

@@ -340,7 +340,7 @@ var import_commander = require("commander");
 // package.json
 var package_default = {
     name: "react-email",
-    version: "2.1.3-canary.1",
+    version: "2.1.3",
     description: "A live preview of your emails right in your browser.",
     bin: {
         email: "./cli/index.js"
@@ -374,7 +374,6 @@ var package_default = {
         "@radix-ui/react-slot": "1.0.2",
         "@radix-ui/react-toggle-group": "1.0.4",
         "@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",
@@ -411,6 +410,8 @@ var package_default = {
         typescript: "5.1.6"
     },
     devDependencies: {
+        "@react-email/components": "0.0.18",
+        "@react-email/render": "0.0.14",
         "@types/fs-extra": "11.0.1",
         "@types/mime-types": "2.1.4",
         "@types/node": "18.0.0",
@@ -757,11 +758,11 @@ var createDependencyGraph = function() {
                 case 1:
                     filePaths = _state.sent();
                     modulePaths = filePaths.filter(isJavascriptModule);
-                    graph = Object.fromEntries(modulePaths.map(function(path11) {
+                    graph = Object.fromEntries(modulePaths.map(function(path12) {
                         return [
-                            path11,
+                            path12,
                             {
-                                path: path11,
+                                path: path12,
                                 dependencyPaths: [],
                                 dependentPaths: [],
                                 moduleDependencies: []
@@ -1686,13 +1687,12 @@ var dev = function() {
     };
 }();
 // src/cli/commands/export.ts
-var import_node_fs6 = __toESM(require("fs"));
-var import_node_path7 = __toESM(require("path"));
+var import_node_fs7 = __toESM(require("fs"));
+var import_node_path8 = __toESM(require("path"));
 var import_glob = require("glob");
 var import_esbuild = require("esbuild");
 var import_ora2 = __toESM(require("ora"));
 var import_log_symbols2 = __toESM(require("log-symbols"));
-var import_render = require("@react-email/render");
 var import_normalize_path = __toESM(require("normalize-path"));
 var import_shelljs = require("shelljs");
 // src/actions/get-emails-directory-metadata.ts
@@ -1774,11 +1774,98 @@ var getEmailsDirectoryMetadata = function() {
         return _ref.apply(this, arguments);
     };
 }();
+// src/utils/render-resolver-esbuild-plugin.ts
+var import_node_path7 = __toESM(require("path"));
+var import_node_fs6 = require("fs");
+var renderResolver = function(emailTemplates) {
+    return {
+        name: "render-resolver",
+        setup: function(b) {
+            b.onLoad({
+                filter: new RegExp(emailTemplates.join("|"))
+            }, function() {
+                var _ref = _async_to_generator(function(param) {
+                    var pathToFile, _tmp, _, _1;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                pathToFile = param.path;
+                                _tmp = {};
+                                _1 = (_ = "").concat;
+                                return [
+                                    4,
+                                    import_node_fs6.promises.readFile(pathToFile, "utf8")
+                                ];
+                            case 1:
+                                return [
+                                    2,
+                                    (_tmp.contents = _1.apply(_, [
+                                        _state.sent(),
+                                        ";\n          export { renderAsync } from 'react-email-module-that-will-export-render'\n        "
+                                    ]), _tmp.loader = import_node_path7.default.extname(pathToFile).slice(1), _tmp)
+                                ];
+                        }
+                    });
+                });
+                return function(_) {
+                    return _ref.apply(this, arguments);
+                };
+            }());
+            b.onResolve({
+                filter: /^react-email-module-that-will-export-render$/
+            }, function() {
+                var _ref = _async_to_generator(function(args) {
+                    var options, result;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                options = {
+                                    kind: "import-statement",
+                                    importer: args.importer,
+                                    resolveDir: args.resolveDir,
+                                    namespace: args.namespace
+                                };
+                                return [
+                                    4,
+                                    b.resolve("@react-email/render", options)
+                                ];
+                            case 1:
+                                result = _state.sent();
+                                if (result.errors.length === 0) {
+                                    return [
+                                        2,
+                                        result
+                                    ];
+                                }
+                                return [
+                                    4,
+                                    b.resolve("@react-email/components", options)
+                                ];
+                            case 2:
+                                result = _state.sent();
+                                if (result.errors.length > 0 && result.errors[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 [
+                                    2,
+                                    result
+                                ];
+                        }
+                    });
+                });
+                return function(args) {
+                    return _ref.apply(this, arguments);
+                };
+            }());
+        }
+    };
+};
 // src/cli/commands/export.ts
+var import_react = require("react");
 var getEmailTemplatesFromDirectory = function(emailDirectory) {
     var templatePaths = [];
     emailDirectory.emailFilenames.forEach(function(filename) {
-        return templatePaths.push(import_node_path7.default.join(emailDirectory.absolutePath, filename));
+        return templatePaths.push(import_node_path8.default.join(emailDirectory.absolutePath, filename));
     });
     emailDirectory.subDirectories.forEach(function(directory) {
         var _templatePaths;
@@ -1788,147 +1875,235 @@ var getEmailTemplatesFromDirectory = function(emailDirectory) {
 };
 var exportTemplates = function() {
     var _ref = _async_to_generator(function(pathToWhereEmailMarkupShouldBeDumped, emailsDirectoryPath, options) {
-        var spinner, emailsDirectoryMetadata, allTemplates, buildResult, allBuiltTemplates, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, template, component, rendered, htmlPath, staticDirectoryPath, pathToDumpStaticFilesInto, result, fileTree;
+        var spinner, emailsDirectoryMetadata, allTemplates, exception, buildFailure, allBuiltTemplates, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, template, emailModule, rendered, htmlPath, exception1, err, staticDirectoryPath, pathToDumpStaticFilesInto, result, fileTree;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    if (import_node_fs6.default.existsSync(pathToWhereEmailMarkupShouldBeDumped)) {
-                        import_node_fs6.default.rmSync(pathToWhereEmailMarkupShouldBeDumped, {
+                    if (import_node_fs7.default.existsSync(pathToWhereEmailMarkupShouldBeDumped)) {
+                        import_node_fs7.default.rmSync(pathToWhereEmailMarkupShouldBeDumped, {
                             recursive: true
                         });
                     }
-                    spinner = (0, import_ora2.default)("Preparing files...\n").start();
-                    closeOraOnSIGNIT(spinner);
+                    if (!options.silent) {
+                        spinner = (0, import_ora2.default)("Preparing files...\n").start();
+                        closeOraOnSIGNIT(spinner);
+                    }
                     return [
                         4,
-                        getEmailsDirectoryMetadata(import_node_path7.default.join(process.cwd(), emailsDirectoryPath))
+                        getEmailsDirectoryMetadata(import_node_path8.default.resolve(process.cwd(), emailsDirectoryPath))
                     ];
                 case 1:
                     emailsDirectoryMetadata = _state.sent();
                     if (typeof emailsDirectoryMetadata === "undefined") {
-                        spinner.stopAndPersist({
-                            symbol: import_log_symbols2.default.error,
-                            text: "Could not find the directory at ".concat(emailsDirectoryPath)
-                        });
+                        if (spinner) {
+                            spinner.stopAndPersist({
+                                symbol: import_log_symbols2.default.error,
+                                text: "Could not find the directory at ".concat(emailsDirectoryPath)
+                            });
+                        }
                         return [
                             2
                         ];
                     }
                     allTemplates = getEmailTemplatesFromDirectory(emailsDirectoryMetadata);
-                    buildResult = (0, import_esbuild.buildSync)({
-                        bundle: true,
-                        entryPoints: allTemplates,
-                        platform: "node",
-                        format: "cjs",
-                        loader: {
-                            ".js": "jsx"
-                        },
-                        outExtension: {
-                            ".js": ".cjs"
-                        },
-                        jsx: "transform",
-                        write: true,
-                        outdir: pathToWhereEmailMarkupShouldBeDumped
-                    });
-                    if (buildResult.warnings.length > 0) {
-                        console.warn(buildResult.warnings);
-                    }
-                    if (buildResult.errors.length > 0) {
+                    _state.label = 2;
+                case 2:
+                    _state.trys.push([
+                        2,
+                        4,
+                        ,
+                        5
+                    ]);
+                    return [
+                        4,
+                        (0, import_esbuild.build)({
+                            bundle: true,
+                            entryPoints: allTemplates,
+                            plugins: [
+                                renderResolver(allTemplates)
+                            ],
+                            platform: "node",
+                            format: "cjs",
+                            loader: {
+                                ".js": "jsx"
+                            },
+                            outExtension: {
+                                ".js": ".cjs"
+                            },
+                            jsx: "transform",
+                            write: true,
+                            outdir: pathToWhereEmailMarkupShouldBeDumped
+                        })
+                    ];
+                case 3:
+                    _state.sent();
+                    return [
+                        3,
+                        5
+                    ];
+                case 4:
+                    exception = _state.sent();
+                    buildFailure = exception;
+                    if (spinner) {
                         spinner.stopAndPersist({
                             symbol: import_log_symbols2.default.error,
                             text: "Failed to build emails"
                         });
-                        console.error(buildResult.errors);
-                        throw new Error("esbuild bundling process for email templates:\n".concat(allTemplates.map(function(p) {
-                            return "- ".concat(p);
-                        }).join("\n")));
                     }
-                    spinner.succeed();
+                    console.warn(buildFailure.warnings);
+                    console.error(buildFailure.errors);
+                    throw new Error("esbuild bundling process for email templates failed:\n".concat(allTemplates.map(function(p) {
+                        return "- ".concat(p);
+                    }).join("\n")));
+                case 5:
+                    if (spinner) {
+                        spinner.succeed();
+                    }
                     allBuiltTemplates = import_glob.glob.sync((0, import_normalize_path.default)("".concat(pathToWhereEmailMarkupShouldBeDumped, "/**/*.cjs")), {
                         absolute: true
                     });
                     _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                    _state.label = 6;
+                case 6:
+                    _state.trys.push([
+                        6,
+                        13,
+                        14,
+                        15
+                    ]);
+                    _iterator = allBuiltTemplates[Symbol.iterator]();
+                    _state.label = 7;
+                case 7:
+                    if (!!(_iteratorNormalCompletion = (_step = _iterator.next()).done)) return [
+                        3,
+                        12
+                    ];
+                    template = _step.value;
+                    _state.label = 8;
+                case 8:
+                    _state.trys.push([
+                        8,
+                        10,
+                        ,
+                        11
+                    ]);
+                    if (spinner) {
+                        spinner.text = "rendering ".concat(template.split("/").pop());
+                        spinner.render();
+                    }
+                    delete require.cache[template];
+                    emailModule = require(template);
+                    return [
+                        4,
+                        emailModule.renderAsync((0, import_react.createElement)(emailModule.default, {}), options)
+                    ];
+                case 9:
+                    rendered = _state.sent();
+                    htmlPath = template.replace(".cjs", options.plainText ? ".txt" : ".html");
+                    (0, import_node_fs7.writeFileSync)(htmlPath, rendered);
+                    (0, import_node_fs7.unlinkSync)(template);
+                    return [
+                        3,
+                        11
+                    ];
+                case 10:
+                    exception1 = _state.sent();
+                    if (spinner) {
+                        spinner.stopAndPersist({
+                            symbol: import_log_symbols2.default.error,
+                            text: "failed when rendering ".concat(template.split("/").pop())
+                        });
+                    }
+                    console.error(exception1);
+                    throw exception1;
+                case 11:
+                    _iteratorNormalCompletion = true;
+                    return [
+                        3,
+                        7
+                    ];
+                case 12:
+                    return [
+                        3,
+                        15
+                    ];
+                case 13:
+                    err = _state.sent();
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                    return [
+                        3,
+                        15
+                    ];
+                case 14:
                     try {
-                        for(_iterator = allBuiltTemplates[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                            template = _step.value;
-                            try {
-                                spinner.text = "rendering ".concat(template.split("/").pop());
-                                spinner.render();
-                                delete require.cache[template];
-                                component = require(template);
-                                rendered = (0, import_render.render)(component.default({}), options);
-                                htmlPath = template.replace(".cjs", options.plainText ? ".txt" : ".html");
-                                (0, import_node_fs6.writeFileSync)(htmlPath, rendered);
-                                (0, import_node_fs6.unlinkSync)(template);
-                            } catch (exception) {
-                                spinner.stopAndPersist({
-                                    symbol: import_log_symbols2.default.error,
-                                    text: "failed when rendering ".concat(template.split("/").pop())
-                                });
-                                console.error(exception);
-                                throw exception;
-                            }
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
                         }
-                    } catch (err) {
-                        _didIteratorError = true;
-                        _iteratorError = err;
                     } finally{
-                        try {
-                            if (!_iteratorNormalCompletion && _iterator.return != null) {
-                                _iterator.return();
-                            }
-                        } finally{
-                            if (_didIteratorError) {
-                                throw _iteratorError;
-                            }
+                        if (_didIteratorError) {
+                            throw _iteratorError;
                         }
                     }
-                    spinner.succeed("Rendered all files");
-                    spinner.text = "Copying static files";
-                    spinner.render();
-                    staticDirectoryPath = import_node_path7.default.join(emailsDirectoryPath, "static");
-                    if (!import_node_fs6.default.existsSync(staticDirectoryPath)) return [
+                    return [
+                        7
+                    ];
+                case 15:
+                    if (spinner) {
+                        spinner.succeed("Rendered all files");
+                        spinner.text = "Copying static files";
+                        spinner.render();
+                    }
+                    staticDirectoryPath = import_node_path8.default.join(emailsDirectoryPath, "static");
+                    if (!import_node_fs7.default.existsSync(staticDirectoryPath)) return [
                         3,
-                        4
+                        18
                     ];
-                    pathToDumpStaticFilesInto = import_node_path7.default.join(pathToWhereEmailMarkupShouldBeDumped, "static");
-                    if (!import_node_fs6.default.existsSync(pathToDumpStaticFilesInto)) return [
+                    pathToDumpStaticFilesInto = import_node_path8.default.join(pathToWhereEmailMarkupShouldBeDumped, "static");
+                    if (!import_node_fs7.default.existsSync(pathToDumpStaticFilesInto)) return [
                         3,
-                        3
+                        17
                     ];
                     return [
                         4,
-                        import_node_fs6.default.promises.rm(pathToDumpStaticFilesInto, {
+                        import_node_fs7.default.promises.rm(pathToDumpStaticFilesInto, {
                             recursive: true
                         })
                     ];
-                case 2:
+                case 16:
                     _state.sent();
-                    _state.label = 3;
-                case 3:
-                    result = (0, import_shelljs.cp)("-r", staticDirectoryPath, import_node_path7.default.join(pathToWhereEmailMarkupShouldBeDumped, "static"));
+                    _state.label = 17;
+                case 17:
+                    result = (0, import_shelljs.cp)("-r", staticDirectoryPath, import_node_path8.default.join(pathToWhereEmailMarkupShouldBeDumped, "static"));
                     if (result.code > 0) {
-                        spinner.stopAndPersist({
-                            symbol: import_log_symbols2.default.error,
-                            text: "Failed to copy static files"
-                        });
+                        if (spinner) {
+                            spinner.stopAndPersist({
+                                symbol: import_log_symbols2.default.error,
+                                text: "Failed to copy static files"
+                            });
+                        }
                         throw new Error("Something went wrong while copying the file to ".concat(pathToWhereEmailMarkupShouldBeDumped, "/static, ").concat(result.stderr));
                     }
-                    _state.label = 4;
-                case 4:
+                    _state.label = 18;
+                case 18:
+                    if (!(spinner && !options.silent)) return [
+                        3,
+                        20
+                    ];
                     spinner.succeed();
                     return [
                         4,
                         tree(pathToWhereEmailMarkupShouldBeDumped, 4)
                     ];
-                case 5:
+                case 19:
                     fileTree = _state.sent();
                     console.log(fileTree);
                     spinner.stopAndPersist({
                         symbol: import_log_symbols2.default.success,
                         text: "Successfully exported emails"
                     });
-                    process.exit();
+                    _state.label = 20;
+                case 20:
                     return [
                         2
                     ];
@@ -1940,8 +2115,8 @@ var exportTemplates = function() {
     };
 }();
 // src/cli/commands/build.ts
-var import_node_fs7 = __toESM(require("fs"));
-var import_node_path8 = __toESM(require("path"));
+var import_node_fs8 = __toESM(require("fs"));
+var import_node_path9 = __toESM(require("path"));
 var import_ora3 = __toESM(require("ora"));
 var import_shelljs2 = __toESM(require("shelljs"));
 var import_node_child_process = require("child_process");
@@ -1976,13 +2151,13 @@ var setNextEnvironmentVariablesForBuild = function() {
             switch(_state.label){
                 case 0:
                     envVariables = _object_spread_props(_object_spread({}, getEnvVariablesForPreviewApp(// If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
-                    import_node_path8.default.normalize(emailsDirRelativePath), "PLACEHOLDER", "PLACEHOLDER")), {
+                    import_node_path9.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  },\n}");
                     return [
                         4,
-                        import_node_fs7.default.promises.writeFile(import_node_path8.default.resolve(builtPreviewAppPath, "./next.config.js"), nextConfigContents, "utf8")
+                        import_node_fs8.default.promises.writeFile(import_node_path9.default.resolve(builtPreviewAppPath, "./next.config.js"), nextConfigContents, "utf8")
                     ];
                 case 1:
                     _state.sent();
@@ -2000,7 +2175,7 @@ var getEmailSlugsFromEmailDirectory = function(emailDirectory, emailsDirectoryAb
     var directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath.replace(emailsDirectoryAbsolutePath, "").trim();
     var slugs = [];
     emailDirectory.emailFilenames.forEach(function(filename) {
-        return slugs.push(import_node_path8.default.join(directoryPathRelativeToEmailsDirectory, filename).split(import_node_path8.default.sep).filter(function(segment) {
+        return slugs.push(import_node_path9.default.join(directoryPathRelativeToEmailsDirectory, filename).split(import_node_path9.default.sep).filter(function(segment) {
             return segment.length > 0;
         }));
     });
@@ -2030,7 +2205,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 function generateStaticParams() { \n  return Promise.resolve(\n    ".concat(JSON.stringify(parameters), "\n  );\n}"), "utf8")
+                        import_node_fs8.default.promises.appendFile(import_node_path9.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();
@@ -2050,11 +2225,11 @@ var updatePackageJson = function() {
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    packageJsonPath = import_node_path8.default.resolve(builtPreviewAppPath, "./package.json");
+                    packageJsonPath = import_node_path9.default.resolve(builtPreviewAppPath, "./package.json");
                     _ = JSON.parse;
                     return [
                         4,
-                        import_node_fs7.default.promises.readFile(packageJsonPath, "utf8")
+                        import_node_fs8.default.promises.readFile(packageJsonPath, "utf8")
                     ];
                 case 1:
                     packageJson = _.apply(JSON, [
@@ -2063,11 +2238,12 @@ var updatePackageJson = function() {
                     packageJson.scripts.build = "next build";
                     packageJson.scripts.start = "next start";
                     packageJson.name = "preview-server";
-                    delete packageJson.dependencies["@react-email/render"];
+                    delete packageJson.devDependencies["@react-email/render"];
+                    delete packageJson.devDependencies["@react-email/components"];
                     packageJson.dependencies.sharp = "0.33.2";
                     return [
                         4,
-                        import_node_fs7.default.promises.writeFile(packageJsonPath, JSON.stringify(packageJson), "utf8")
+                        import_node_fs8.default.promises.writeFile(packageJsonPath, JSON.stringify(packageJson), "utf8")
                     ];
                 case 2:
                     _state.sent();
@@ -2104,7 +2280,7 @@ var npmInstall = function() {
         return _ref.apply(this, arguments);
     };
 }();
-var build = function() {
+var build2 = function() {
     var _ref = _async_to_generator(function(param) {
         var emailsDirRelativePath, packageManager, spinner, emailsDirPath, staticPath, builtPreviewAppPath, builtStaticDirectory, error;
         return _ts_generator(this, function(_state) {
@@ -2125,20 +2301,20 @@ var build = function() {
                     }).start();
                     closeOraOnSIGNIT(spinner);
                     spinner.text = "Checking if emails folder exists";
-                    if (!import_node_fs7.default.existsSync(emailsDirRelativePath)) {
+                    if (!import_node_fs8.default.existsSync(emailsDirRelativePath)) {
                         throw new Error("Missing ".concat(emailsDirRelativePath, " folder"));
                     }
-                    emailsDirPath = import_node_path8.default.join(process.cwd(), emailsDirRelativePath);
-                    staticPath = import_node_path8.default.join(emailsDirPath, "static");
-                    builtPreviewAppPath = import_node_path8.default.join(process.cwd(), ".react-email");
-                    if (!import_node_fs7.default.existsSync(builtPreviewAppPath)) return [
+                    emailsDirPath = import_node_path9.default.join(process.cwd(), emailsDirRelativePath);
+                    staticPath = import_node_path9.default.join(emailsDirPath, "static");
+                    builtPreviewAppPath = import_node_path9.default.join(process.cwd(), ".react-email");
+                    if (!import_node_fs8.default.existsSync(builtPreviewAppPath)) return [
                         3,
                         3
                     ];
                     spinner.text = "Deleting pre-existing `.react-email` folder";
                     return [
                         4,
-                        import_node_fs7.default.promises.rm(builtPreviewAppPath, {
+                        import_node_fs8.default.promises.rm(builtPreviewAppPath, {
                             recursive: true
                         })
                     ];
@@ -2149,7 +2325,7 @@ var build = function() {
                     spinner.text = "Copying preview app from CLI to `.react-email`";
                     return [
                         4,
-                        import_node_fs7.default.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
+                        import_node_fs8.default.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
                             recursive: true,
                             filter: function(source) {
                                 return !source.includes("/cli/") && !source.includes("/.next/") && !/\/node_modules\/?$/.test(source);
@@ -2158,15 +2334,15 @@ var build = function() {
                     ];
                 case 4:
                     _state.sent();
-                    if (!import_node_fs7.default.existsSync(staticPath)) return [
+                    if (!import_node_fs8.default.existsSync(staticPath)) return [
                         3,
                         6
                     ];
                     spinner.text = "Copying `static` folder into `.react-email/public/static`";
-                    builtStaticDirectory = import_node_path8.default.resolve(builtPreviewAppPath, "./public/static");
+                    builtStaticDirectory = import_node_path9.default.resolve(builtPreviewAppPath, "./public/static");
                     return [
                         4,
-                        import_node_fs7.default.promises.cp(staticPath, builtStaticDirectory, {
+                        import_node_fs8.default.promises.cp(staticPath, builtStaticDirectory, {
                             recursive: true
                         })
                     ];
@@ -2231,13 +2407,13 @@ var build = function() {
             }
         });
     });
-    return function build(_) {
+    return function build2(_) {
         return _ref.apply(this, arguments);
     };
 }();
 // src/cli/commands/start.ts
-var import_node_fs8 = __toESM(require("fs"));
-var import_node_path9 = __toESM(require("path"));
+var import_node_fs9 = __toESM(require("fs"));
+var import_node_path10 = __toESM(require("path"));
 var import_node_child_process2 = require("child_process");
 var start = function() {
     var _ref = _async_to_generator(function() {
@@ -2245,8 +2421,8 @@ var start = function() {
         return _ts_generator(this, function(_state) {
             try {
                 usersProjectLocation = process.cwd();
-                builtPreviewPath = import_node_path9.default.resolve(usersProjectLocation, "./.react-email");
-                if (!import_node_fs8.default.existsSync(builtPreviewPath)) {
+                builtPreviewPath = import_node_path10.default.resolve(usersProjectLocation, "./.react-email");
+                if (!import_node_fs9.default.existsSync(builtPreviewPath)) {
                     throw new Error("Could not find `.react-email`, maybe you haven't ran `email build`?");
                 }
                 nextStart = (0, import_node_child_process2.spawn)("npm", [
@@ -2277,12 +2453,13 @@ var start = function() {
 var PACKAGE_NAME = "react-email";
 import_commander.program.name(PACKAGE_NAME).description("A live preview of your emails right in your browser").version(package_default.version);
 import_commander.program.command("dev").description("Starts the preview email development app").option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-p --port <port>", "Port to run dev server on", "3000").action(dev);
-import_commander.program.command("build").description("Copies the preview app for onto .react-email and builds it").option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-p --packageManager <name>", "Package name to use on installation on `.react-email`", "npm").action(build);
+import_commander.program.command("build").description("Copies the preview app for onto .react-email and builds it").option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-p --packageManager <name>", "Package name to use on installation on `.react-email`", "npm").action(build2);
 import_commander.program.command("start").description('Runs the built preview app that is inside of ".react-email"').action(start);
-import_commander.program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").action(function(param) {
-    var outDir = param.outDir, pretty = param.pretty, plainText = param.plainText, srcDir = param.dir;
+import_commander.program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-s, --silent", "To, or not to show a spinner with process information", false).action(function(param) {
+    var outDir = param.outDir, pretty = param.pretty, plainText = param.plainText, silent = param.silent, srcDir = param.dir;
     return exportTemplates(outDir, srcDir, {
         pretty: pretty,
+        silent: silent,
         plainText: plainText
     });
 });

package/cli/index.mjs

@@ -13,7 +13,7 @@ import { program } from "commander";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "2.1.3-canary.1",
+  version: "2.1.3",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./cli/index.js"
@@ -47,7 +47,6 @@ var package_default = {
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-toggle-group": "1.0.4",
     "@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",
@@ -84,6 +83,8 @@ var package_default = {
     typescript: "5.1.6"
   },
   devDependencies: {
+    "@react-email/components": "0.0.18",
+    "@react-email/render": "0.0.14",
     "@types/fs-extra": "11.0.1",
     "@types/mime-types": "2.1.4",
     "@types/node": "18.0.0",
@@ -220,10 +221,10 @@ var createDependencyGraph = async (directory) => {
   const filePaths = await readAllFilesInsideDirectory(directory);
   const modulePaths = filePaths.filter(isJavascriptModule);
   const graph = Object.fromEntries(
-    modulePaths.map((path11) => [
-      path11,
+    modulePaths.map((path12) => [
+      path12,
       {
-        path: path11,
+        path: path12,
         dependencyPaths: [],
         dependentPaths: [],
         moduleDependencies: []
@@ -633,13 +634,12 @@ var dev = async ({ dir: emailsDirRelativePath, port }) => {
 };
 
 // src/cli/commands/export.ts
-import fs6, { unlinkSync, writeFileSync } from "fs";
-import path8 from "path";
+import fs7, { unlinkSync, writeFileSync } from "fs";
+import path9 from "path";
 import { glob } from "glob";
-import { buildSync } from "esbuild";
+import { build } from "esbuild";
 import ora2 from "ora";
 import logSymbols2 from "log-symbols";
-import { render } from "@react-email/render";
 import normalize from "normalize-path";
 import { cp } from "shelljs";
 
@@ -701,11 +701,52 @@ var getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory) => {
   });
 };
 
+// src/utils/render-resolver-esbuild-plugin.ts
+import path8 from "path";
+import { promises as fs6 } from "fs";
+var renderResolver = (emailTemplates) => ({
+  name: "render-resolver",
+  setup: (b) => {
+    b.onLoad(
+      { filter: new RegExp(emailTemplates.join("|")) },
+      async ({ path: pathToFile }) => {
+        return {
+          contents: `${await fs6.readFile(pathToFile, "utf8")};
+          export { renderAsync } from 'react-email-module-that-will-export-render'
+        `,
+          loader: path8.extname(pathToFile).slice(1)
+        };
+      }
+    );
+    b.onResolve(
+      { filter: /^react-email-module-that-will-export-render$/ },
+      async (args) => {
+        const options = {
+          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;
+        }
+        result = await b.resolve("@react-email/components", options);
+        if (result.errors.length > 0 && result.errors[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;
+      }
+    );
+  }
+});
+
 // src/cli/commands/export.ts
+import { createElement } from "react";
 var getEmailTemplatesFromDirectory = (emailDirectory) => {
   const templatePaths = [];
   emailDirectory.emailFilenames.forEach(
-    (filename) => templatePaths.push(path8.join(emailDirectory.absolutePath, filename))
+    (filename) => templatePaths.push(path9.join(emailDirectory.absolutePath, filename))
   );
   emailDirectory.subDirectories.forEach((directory) => {
     templatePaths.push(...getEmailTemplatesFromDirectory(directory));
@@ -713,48 +754,58 @@ var getEmailTemplatesFromDirectory = (emailDirectory) => {
   return templatePaths;
 };
 var exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirectoryPath, options) => {
-  if (fs6.existsSync(pathToWhereEmailMarkupShouldBeDumped)) {
-    fs6.rmSync(pathToWhereEmailMarkupShouldBeDumped, { recursive: true });
+  if (fs7.existsSync(pathToWhereEmailMarkupShouldBeDumped)) {
+    fs7.rmSync(pathToWhereEmailMarkupShouldBeDumped, { recursive: true });
+  }
+  let spinner;
+  if (!options.silent) {
+    spinner = ora2("Preparing files...\n").start();
+    closeOraOnSIGNIT(spinner);
   }
-  const spinner = ora2("Preparing files...\n").start();
-  closeOraOnSIGNIT(spinner);
   const emailsDirectoryMetadata = await getEmailsDirectoryMetadata(
-    path8.join(process.cwd(), emailsDirectoryPath)
+    path9.resolve(process.cwd(), emailsDirectoryPath)
   );
   if (typeof emailsDirectoryMetadata === "undefined") {
-    spinner.stopAndPersist({
-      symbol: logSymbols2.error,
-      text: `Could not find the directory at ${emailsDirectoryPath}`
-    });
+    if (spinner) {
+      spinner.stopAndPersist({
+        symbol: logSymbols2.error,
+        text: `Could not find the directory at ${emailsDirectoryPath}`
+      });
+    }
     return;
   }
   const allTemplates = getEmailTemplatesFromDirectory(emailsDirectoryMetadata);
-  const buildResult = buildSync({
-    bundle: true,
-    entryPoints: allTemplates,
-    platform: "node",
-    format: "cjs",
-    loader: { ".js": "jsx" },
-    outExtension: { ".js": ".cjs" },
-    jsx: "transform",
-    write: true,
-    outdir: pathToWhereEmailMarkupShouldBeDumped
-  });
-  if (buildResult.warnings.length > 0) {
-    console.warn(buildResult.warnings);
-  }
-  if (buildResult.errors.length > 0) {
-    spinner.stopAndPersist({
-      symbol: logSymbols2.error,
-      text: "Failed to build emails"
+  try {
+    await build({
+      bundle: true,
+      entryPoints: allTemplates,
+      plugins: [renderResolver(allTemplates)],
+      platform: "node",
+      format: "cjs",
+      loader: { ".js": "jsx" },
+      outExtension: { ".js": ".cjs" },
+      jsx: "transform",
+      write: true,
+      outdir: pathToWhereEmailMarkupShouldBeDumped
     });
-    console.error(buildResult.errors);
+  } catch (exception) {
+    const buildFailure = exception;
+    if (spinner) {
+      spinner.stopAndPersist({
+        symbol: logSymbols2.error,
+        text: "Failed to build emails"
+      });
+    }
+    console.warn(buildFailure.warnings);
+    console.error(buildFailure.errors);
     throw new Error(
-      `esbuild bundling process for email templates:
+      `esbuild bundling process for email templates failed:
 ${allTemplates.map((p) => `- ${p}`).join("\n")}`
     );
   }
-  spinner.succeed();
+  if (spinner) {
+    spinner.succeed();
+  }
   const allBuiltTemplates = glob.sync(
     normalize(`${pathToWhereEmailMarkupShouldBeDumped}/**/*.cjs`),
     {
@@ -763,11 +814,16 @@ ${allTemplates.map((p) => `- ${p}`).join("\n")}`
   );
   for (const template of allBuiltTemplates) {
     try {
-      spinner.text = `rendering ${template.split("/").pop()}`;
-      spinner.render();
+      if (spinner) {
+        spinner.text = `rendering ${template.split("/").pop()}`;
+        spinner.render();
+      }
       delete __require.cache[template];
-      const component = __require(template);
-      const rendered = render(component.default({}), options);
+      const emailModule = __require(template);
+      const rendered = await emailModule.renderAsync(
+        createElement(emailModule.default, {}),
+        options
+      );
       const htmlPath = template.replace(
         ".cjs",
         options.plainText ? ".txt" : ".html"
@@ -775,53 +831,60 @@ ${allTemplates.map((p) => `- ${p}`).join("\n")}`
       writeFileSync(htmlPath, rendered);
       unlinkSync(template);
     } catch (exception) {
-      spinner.stopAndPersist({
-        symbol: logSymbols2.error,
-        text: `failed when rendering ${template.split("/").pop()}`
-      });
+      if (spinner) {
+        spinner.stopAndPersist({
+          symbol: logSymbols2.error,
+          text: `failed when rendering ${template.split("/").pop()}`
+        });
+      }
       console.error(exception);
       throw exception;
     }
   }
-  spinner.succeed("Rendered all files");
-  spinner.text = `Copying static files`;
-  spinner.render();
-  const staticDirectoryPath = path8.join(emailsDirectoryPath, "static");
-  if (fs6.existsSync(staticDirectoryPath)) {
-    const pathToDumpStaticFilesInto = path8.join(
+  if (spinner) {
+    spinner.succeed("Rendered all files");
+    spinner.text = `Copying static files`;
+    spinner.render();
+  }
+  const staticDirectoryPath = path9.join(emailsDirectoryPath, "static");
+  if (fs7.existsSync(staticDirectoryPath)) {
+    const pathToDumpStaticFilesInto = path9.join(
       pathToWhereEmailMarkupShouldBeDumped,
       "static"
     );
-    if (fs6.existsSync(pathToDumpStaticFilesInto))
-      await fs6.promises.rm(pathToDumpStaticFilesInto, { recursive: true });
+    if (fs7.existsSync(pathToDumpStaticFilesInto))
+      await fs7.promises.rm(pathToDumpStaticFilesInto, { recursive: true });
     const result = cp(
       "-r",
       staticDirectoryPath,
-      path8.join(pathToWhereEmailMarkupShouldBeDumped, "static")
+      path9.join(pathToWhereEmailMarkupShouldBeDumped, "static")
     );
     if (result.code > 0) {
-      spinner.stopAndPersist({
-        symbol: logSymbols2.error,
-        text: "Failed to copy static files"
-      });
+      if (spinner) {
+        spinner.stopAndPersist({
+          symbol: logSymbols2.error,
+          text: "Failed to copy static files"
+        });
+      }
       throw new Error(
         `Something went wrong while copying the file to ${pathToWhereEmailMarkupShouldBeDumped}/static, ${result.stderr}`
       );
     }
   }
-  spinner.succeed();
-  const fileTree = await tree(pathToWhereEmailMarkupShouldBeDumped, 4);
-  console.log(fileTree);
-  spinner.stopAndPersist({
-    symbol: logSymbols2.success,
-    text: "Successfully exported emails"
-  });
-  process.exit();
+  if (spinner && !options.silent) {
+    spinner.succeed();
+    const fileTree = await tree(pathToWhereEmailMarkupShouldBeDumped, 4);
+    console.log(fileTree);
+    spinner.stopAndPersist({
+      symbol: logSymbols2.success,
+      text: "Successfully exported emails"
+    });
+  }
 };
 
 // src/cli/commands/build.ts
-import fs7 from "fs";
-import path9 from "path";
+import fs8 from "fs";
+import path10 from "path";
 import ora3 from "ora";
 import shell from "shelljs";
 import { spawn } from "child_process";
@@ -854,7 +917,7 @@ var setNextEnvironmentVariablesForBuild = async (emailsDirRelativePath, builtPre
   const envVariables = {
     ...getEnvVariablesForPreviewApp(
       // If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
-      path9.normalize(emailsDirRelativePath),
+      path10.normalize(emailsDirRelativePath),
       "PLACEHOLDER",
       "PLACEHOLDER"
     ),
@@ -891,8 +954,8 @@ module.exports = {
     webpackBuildWorker: true
   },
 }`;
-  await fs7.promises.writeFile(
-    path9.resolve(builtPreviewAppPath, "./next.config.js"),
+  await fs8.promises.writeFile(
+    path10.resolve(builtPreviewAppPath, "./next.config.js"),
     nextConfigContents,
     "utf8"
   );
@@ -902,7 +965,7 @@ var getEmailSlugsFromEmailDirectory = (emailDirectory, emailsDirectoryAbsolutePa
   const slugs = [];
   emailDirectory.emailFilenames.forEach(
     (filename) => slugs.push(
-      path9.join(directoryPathRelativeToEmailsDirectory, filename).split(path9.sep).filter((segment) => segment.length > 0)
+      path10.join(directoryPathRelativeToEmailsDirectory, filename).split(path10.sep).filter((segment) => segment.length > 0)
     )
   );
   emailDirectory.subDirectories.forEach((directory) => {
@@ -924,8 +987,8 @@ var forceSSGForEmailPreviews = async (emailsDirPath, builtPreviewAppPath) => {
     emailDirectoryMetadata,
     emailsDirPath
   ).map((slug) => ({ slug }));
-  await fs7.promises.appendFile(
-    path9.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
+  await fs8.promises.appendFile(
+    path10.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
     `
 
 export function generateStaticParams() { 
@@ -937,16 +1000,17 @@ export function generateStaticParams() {
   );
 };
 var updatePackageJson = async (builtPreviewAppPath) => {
-  const packageJsonPath = path9.resolve(builtPreviewAppPath, "./package.json");
+  const packageJsonPath = path10.resolve(builtPreviewAppPath, "./package.json");
   const packageJson = JSON.parse(
-    await fs7.promises.readFile(packageJsonPath, "utf8")
+    await fs8.promises.readFile(packageJsonPath, "utf8")
   );
   packageJson.scripts.build = "next build";
   packageJson.scripts.start = "next start";
   packageJson.name = "preview-server";
-  delete packageJson.dependencies["@react-email/render"];
+  delete packageJson.devDependencies["@react-email/render"];
+  delete packageJson.devDependencies["@react-email/components"];
   packageJson.dependencies.sharp = "0.33.2";
-  await fs7.promises.writeFile(
+  await fs8.promises.writeFile(
     packageJsonPath,
     JSON.stringify(packageJson),
     "utf8"
@@ -971,7 +1035,7 @@ var npmInstall = async (builtPreviewAppPath, packageManager) => {
     );
   });
 };
-var build = async ({
+var build2 = async ({
   dir: emailsDirRelativePath,
   packageManager
 }) => {
@@ -982,30 +1046,30 @@ var build = async ({
     }).start();
     closeOraOnSIGNIT(spinner);
     spinner.text = "Checking if emails folder exists";
-    if (!fs7.existsSync(emailsDirRelativePath)) {
+    if (!fs8.existsSync(emailsDirRelativePath)) {
       throw new Error(`Missing ${emailsDirRelativePath} folder`);
     }
-    const emailsDirPath = path9.join(process.cwd(), emailsDirRelativePath);
-    const staticPath = path9.join(emailsDirPath, "static");
-    const builtPreviewAppPath = path9.join(process.cwd(), ".react-email");
-    if (fs7.existsSync(builtPreviewAppPath)) {
+    const emailsDirPath = path10.join(process.cwd(), emailsDirRelativePath);
+    const staticPath = path10.join(emailsDirPath, "static");
+    const builtPreviewAppPath = path10.join(process.cwd(), ".react-email");
+    if (fs8.existsSync(builtPreviewAppPath)) {
       spinner.text = "Deleting pre-existing `.react-email` folder";
-      await fs7.promises.rm(builtPreviewAppPath, { recursive: true });
+      await fs8.promises.rm(builtPreviewAppPath, { recursive: true });
     }
     spinner.text = "Copying preview app from CLI to `.react-email`";
-    await fs7.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
+    await fs8.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
       recursive: true,
       filter: (source) => {
         return !source.includes("/cli/") && !source.includes("/.next/") && !/\/node_modules\/?$/.test(source);
       }
     });
-    if (fs7.existsSync(staticPath)) {
+    if (fs8.existsSync(staticPath)) {
       spinner.text = "Copying `static` folder into `.react-email/public/static`";
-      const builtStaticDirectory = path9.resolve(
+      const builtStaticDirectory = path10.resolve(
         builtPreviewAppPath,
         "./public/static"
       );
-      await fs7.promises.cp(staticPath, builtStaticDirectory, {
+      await fs8.promises.cp(staticPath, builtStaticDirectory, {
         recursive: true
       });
     }
@@ -1032,17 +1096,17 @@ var build = async ({
 };
 
 // src/cli/commands/start.ts
-import fs8 from "fs";
-import path10 from "path";
+import fs9 from "fs";
+import path11 from "path";
 import { spawn as spawn2 } from "child_process";
 var start = async () => {
   try {
     const usersProjectLocation = process.cwd();
-    const builtPreviewPath = path10.resolve(
+    const builtPreviewPath = path11.resolve(
       usersProjectLocation,
       "./.react-email"
     );
-    if (!fs8.existsSync(builtPreviewPath)) {
+    if (!fs9.existsSync(builtPreviewPath)) {
       throw new Error(
         "Could not find `.react-email`, maybe you haven't ran `email build`?"
       );
@@ -1070,9 +1134,13 @@ program.command("build").description("Copies the preview app for onto .react-ema
   "-p --packageManager <name>",
   "Package name to use on installation on `.react-email`",
   "npm"
-).action(build);
+).action(build2);
 program.command("start").description('Runs the built preview app that is inside of ".react-email"').action(start);
-program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").action(
-  ({ outDir, pretty, plainText, dir: srcDir }) => exportTemplates(outDir, srcDir, { pretty, plainText })
+program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").option(
+  "-s, --silent",
+  "To, or not to show a spinner with process information",
+  false
+).action(
+  ({ outDir, pretty, plainText, silent, dir: srcDir }) => exportTemplates(outDir, srcDir, { pretty, silent, plainText })
 );
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "2.1.3-canary.1",
+  "version": "2.1.3",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./cli/index.js"
@@ -26,7 +26,6 @@
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-toggle-group": "1.0.4",
     "@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",
@@ -63,6 +62,8 @@
     "typescript": "5.1.6"
   },
   "devDependencies": {
+    "@react-email/components": "0.0.18",
+    "@react-email/render": "0.0.14",
     "@types/fs-extra": "11.0.1",
     "@types/mime-types": "2.1.4",
     "@types/node": "18.0.0",

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

@@ -1,20 +1,14 @@
 /* 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 ResolveOptions,
-  type BuildFailure,
-  type Loader,
-} from 'esbuild';
+import { type OutputFile, build, type BuildFailure } 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';
 import { staticNodeModulesForVM } from './static-node-modules-for-vm';
+import { renderResolver } from './render-resolver-esbuild-plugin';
 
 export const getEmailComponent = async (
   emailPath: string,
@@ -33,46 +27,7 @@ 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;
-              },
-            );
-          },
-        },
-      ],
+      plugins: [renderResolver([emailPath])],
       platform: 'node',
       write: false,
 

package/src/utils/render-resolver-esbuild-plugin.ts

@@ -0,0 +1,52 @@
+import path from 'node:path';
+import { promises as fs } from 'node:fs';
+import type { Loader, PluginBuild, ResolveOptions } from 'esbuild';
+
+/**
+ * Made to export the `renderAsync` function out of the user's email template
+ * so that issues like https://github.com/resend/react-email/issues/649 don't
+ * happen.
+ *
+ * This avoids multiple versions of React being involved, i.e., the version
+ * in the CLI vs. the version the user has on their emails.
+ */
+export const renderResolver = (emailTemplates: string[]) => ({
+  name: 'render-resolver',
+  setup: (b: PluginBuild) => {
+    b.onLoad(
+      { filter: new RegExp(emailTemplates.join('|')) },
+      async ({ path: pathToFile }) => {
+        return {
+          contents: `${await fs.readFile(pathToFile, 'utf8')};
+          export { renderAsync } from 'react-email-module-that-will-export-render'
+        `,
+          loader: path.extname(pathToFile).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]) {
+          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;
+      },
+    );
+  },
+});