Import React from import map (#32335)

Closes #24863

Signed-off-by: Jon Koops <jonkoops@gmail.com>

themes/package.json

@@ -3,7 +3,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "pnpm build:clean && rollup --config",
+    "build": "pnpm build:clean && rollup --config && pnpm build:rewrite-import",
+    "build:rewrite-import": "node scripts/rewrite-imports.js",
     "build:clean": "shx rm -rf vendor"
   },
   "dependencies": {

themes/rollup.config.js

@@ -12,7 +12,7 @@ const plugins = [
     preventAssignment: true,
     // React depends on process.env.NODE_ENV to determine which code to include for production.
     // This ensures that no additional code meant for development is included in the build.
-    "process.env.NODE_ENV": JSON.stringify("production"),
+    "process.env.NODE_ENV": '"production"',
   }),
   terser(),
 ];

themes/scripts/rewrite-imports.js

@@ -0,0 +1,17 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+
+const targetDir = "target/classes/theme/keycloak/common/resources/vendor";
+
+replaceContents(
+  path.join(targetDir, "react/react-jsx-runtime.production.min.js"),
+  '"./react.production.min.js"',
+  '"react"',
+);
+
+async function replaceContents(filePath, search, replace) {
+  const file = await fs.readFile(filePath, "utf8");
+  const newFile = file.replace(search, replace);
+
+  await fs.writeFile(filePath, newFile);
+}