From 293333056fb47d4cbe30e1735fcd1d42baba768a Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Thu, 22 Aug 2024 12:41:28 +0200
Subject: [PATCH] Import React from import map (#32335)

Closes #24863

Signed-off-by: Jon Koops <jonkoops@gmail.com>
---
 themes/package.json               |  3 ++-
 themes/rollup.config.js           |  2 +-
 themes/scripts/rewrite-imports.js | 17 +++++++++++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 themes/scripts/rewrite-imports.js

diff --git a/themes/package.json b/themes/package.json
index 78cc25da98..128bacfbb9 100644
--- a/themes/package.json
+++ b/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": {
diff --git a/themes/rollup.config.js b/themes/rollup.config.js
index 7cc197f519..cb8aecd656 100644
--- a/themes/rollup.config.js
+++ b/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(),
 ];
diff --git a/themes/scripts/rewrite-imports.js b/themes/scripts/rewrite-imports.js
new file mode 100644
index 0000000000..64907ef6c7
--- /dev/null
+++ b/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);
+}