From 0cb100fddfa672a4115a61ed66c08ff979c7aa36 Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Wed, 3 Jul 2024 12:53:31 +0000
Subject: [PATCH] fix(react): Fix React jsx runtime import for esm

---
 dev-packages/rollup-utils/npmHelpers.mjs          |  8 ++++++--
 .../rollup-utils/plugins/make-esm-plugin.mjs      | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/dev-packages/rollup-utils/npmHelpers.mjs b/dev-packages/rollup-utils/npmHelpers.mjs
index 5be51096cf75..e95e63700c09 100644
--- a/dev-packages/rollup-utils/npmHelpers.mjs
+++ b/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()],
+      },
     });
   }
 
diff --git a/dev-packages/rollup-utils/plugins/make-esm-plugin.mjs b/dev-packages/rollup-utils/plugins/make-esm-plugin.mjs
index 04dd68beaa1c..91aba689f888 100644
--- a/dev-packages/rollup-utils/plugins/make-esm-plugin.mjs
+++ b/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"',
+    },
+  });
+}