fix(react): Fix React jsx runtime import for esm (#12740)

Author: Luca Forstner

dev-packages/rollup-utils/npmHelpers.mjs

@@ -22,7 +22,7 @@ import {
   makeSetSDKSourcePlugin,
   makeSucrasePlugin,
 } from './plugins/index.mjs';
-import { makePackageNodeEsm } from './plugins/make-esm-plugin.mjs';
+import { makePackageNodeEsm, makeReactEsmJsxRuntimePlugin } from './plugins/make-esm-plugin.mjs';
 import { mergePlugins } from './utils.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -140,7 +140,11 @@ export function makeNPMConfigVariants(baseConfig, options = {}) {
 
   if (emitEsm) {
     variantSpecificConfigs.push({
-      output: { format: 'esm', dir: path.join(baseConfig.output.dir, 'esm'), plugins: [makePackageNodeEsm()] },
+      output: {
+        format: 'esm',
+        dir: path.join(baseConfig.output.dir, 'esm'),
+        plugins: [makePackageNodeEsm(), makeReactEsmJsxRuntimePlugin()],
+      },
     });
   }
 

dev-packages/rollup-utils/plugins/make-esm-plugin.mjs

@@ -1,4 +1,5 @@
 import fs from 'node:fs';
+import replacePlugin from '@rollup/plugin-replace';
 
 /**
  * Outputs a package.json file with {type: module} in the root of the output directory so that Node
@@ -29,3 +30,17 @@ export function makePackageNodeEsm() {
     },
   };
 }
+
+/**
+ * Makes sure that whenever we add an `react/jsx-runtime` import, we add a `.js` to make the import esm compatible.
+ */
+export function makeReactEsmJsxRuntimePlugin() {
+  return replacePlugin({
+    preventAssignment: false,
+    sourceMap: true,
+    values: {
+      "'react/jsx-runtime'": "'react/jsx-runtime.js'",
+      '"react/jsx-runtime"': '"react/jsx-runtime.js"',
+    },
+  });
+}