fix(jsx-email): modify core plugin imports for bundler resolution

.npmrc

@@ -5,6 +5,7 @@ auth-type=legacy
 
 # pnpm options
 always-auth = true
+auto-install-peers = true
 enable-pre-post-scripts = true
 link-workspace-packages = false
 shamefully-hoist = true

packages/jsx-email/src/config.ts

@@ -78,20 +78,49 @@ const checkName = (plugin: JsxEmailPlugin, source?: string) => {
   }
 };
 
-const importPlugin = async (name: string) => {
+interface PluginImport {
+  plugin: JsxEmailPlugin;
+}
+
+const handleImportError = (error: any, name: string) => {
+  if (error.code === 'ERR_MODULE_NOT_FOUND') {
+    log.error(chalk`{red jsx-email}: Tried to import plugin '${name}' but it wasn't found`);
+  } else {
+    log.error(error);
+  }
+};
+
+// Note: We have to be verbose here so that bundlers pick up on the imports.
+// Most of them can't handle dynamically importing these plugins from variables containing
+// their names without additional config, and we don't want that burden on users
+const importInlinePlugin = async () => {
+  try {
+    const { plugin } = (await import('@jsx-email/plugin-inline')) as unknown as PluginImport;
+    return plugin;
+  } catch (error) {
+    handleImportError(error, '@jsx-email/plugin-inline');
+  }
+
+  return null;
+};
+
+const importMinifyPlugin = async () => {
   try {
-    const { plugin } = (await import(name)) as { plugin: JsxEmailPlugin };
+    const { plugin } = (await import('@jsx-email/plugin-minify')) as unknown as PluginImport;
+    return plugin;
+  } catch (error) {
+    handleImportError(error, '@jsx-email/plugin-inline');
+  }
 
-    checkSymbol(plugin, name);
-    checkName(plugin, name);
+  return null;
+};
 
+const importPrettyPlugin = async () => {
+  try {
+    const { plugin } = (await import('@jsx-email/plugin-pretty')) as unknown as PluginImport;
     return plugin;
   } catch (error) {
-    if ((error as any).code === 'ERR_MODULE_NOT_FOUND') {
-      log.error(chalk`{red jsx-email}: Tried to import a plugin '${name}' but it wasn't found`);
-    } else {
-      log.error(error);
-    }
+    handleImportError(error, '@jsx-email/plugin-inline');
   }
 
   return null;
@@ -109,17 +138,17 @@ export const defineConfig = async (config: DefineConfigOptions = {}): Promise<Js
     // Note: The order of plugins here actually matters for how the doc gets
     // transformed. Changing this ordering may produce undesirable html
     if (config.render?.inlineCss) {
-      const inline = await importPlugin(plugins.inline);
+      const inline = await importInlinePlugin();
       if (inline) mods.plugins.push(inline);
     }
 
     if (config.render?.minify) {
-      const minify = await importPlugin(plugins.minify);
+      const minify = await importMinifyPlugin();
       if (minify) mods.plugins.push(minify);
     }
 
     if (config.render?.pretty) {
-      const pretty = await importPlugin(plugins.pretty);
+      const pretty = await importPrettyPlugin();
       if (pretty) mods.plugins.push(pretty);
     }
 
@@ -148,6 +177,8 @@ export const defineConfig = async (config: DefineConfigOptions = {}): Promise<Js
   result.plugins = Array.from(pluginMap, ([, value]) => value);
 
   for (const plugin of result.plugins || []) {
+    checkName(plugin);
+    checkSymbol(plugin);
     (plugin as PluginInternal).log = getPluginLog(plugin.name);
   }