fix(preview-server): custom JSX runtime not running properly in ESM projects (#2381)

Author: gabrielmfern

.changeset/wet-ideas-run.md

@@ -0,0 +1,5 @@
+---
+"@react-email/preview-server": patch
+---
+
+fix custom JSX runtime trying to be run as ESM on ESM projects

packages/preview-server/jsx-runtime/jsx-dev-runtime.js

@@ -1,7 +1,7 @@
 // This hack is necessary because React forces the use of the non-dev JSX runtime
 // when NODE_ENV is set to 'production', which would break the data-source references
 // we need for stack traces in the preview server.
-const ReactJSXDevRuntime = require('react/jsx-dev-runtime');
+import ReactJSXDevRuntime from 'react/jsx-dev-runtime';
 
 export function jsxDEV(type, props, key, isStaticChildren, source, self) {
   const newProps = { ...props };

packages/preview-server/src/utils/create-jsx-runtime.ts

@@ -18,6 +18,16 @@ export const createJsxRuntime = async (
     'node_modules',
     '.react-email-jsx-runtime',
   );
+  if (!fs.existsSync(jsxRuntimePath)) {
+    await fs.promises.mkdir(jsxRuntimePath, {
+      recursive: true,
+    });
+    await fs.promises.writeFile(
+      path.join(jsxRuntimePath, 'package.json'),
+      '{"type": "commonjs"}',
+      'utf8',
+    );
+  }
   await esbuild.build({
     bundle: true,
     outfile: path.join(jsxRuntimePath, 'jsx-dev-runtime.js'),