Include react and react-dom as external dependencies (#24843)

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

.github/workflows/js-ci.yml

@@ -49,7 +49,7 @@ jobs:
 
       - name: Build Keycloak
         run: |
-          ./mvnw clean install --batch-mode --errors -DskipTests -DskipTestsuite -DskipExamples -DskipAccount2 -DskipCommon -Pdistribution
+          ./mvnw clean install --batch-mode --errors -DskipTests -DskipTestsuite -DskipExamples -DskipAccount2 -Pdistribution
           mv ./quarkus/dist/target/keycloak-999.0.0-SNAPSHOT.tar.gz ./keycloak-999.0.0-SNAPSHOT.tar.gz
 
       - name: Upload Keycloak dist

js/apps/account-ui/pom.xml

@@ -90,7 +90,19 @@
                         </replacement>
                         <replacement>
                             <token><![CDATA[<title>Keycloak account console</title>]]></token>
-                            <value xml:space="preserve"><![CDATA[<title>${properties.title!"Keycloak account console"}</title>]]></value>
+                            <value xml:space="preserve">
+<![CDATA[
+    <title>${properties.title!"Keycloak account console"}</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "${resourceCommonUrl}/vendor/react/react.production.min.js",
+          "react/jsx-runtime": "${resourceCommonUrl}/vendor/react/react-jsx-runtime.production.min.js",
+          "react-dom": "${resourceCommonUrl}/vendor/react-dom/react-dom.production.min.js"
+        }
+      }
+    </script>
+]]></value>
                         </replacement>
                         <replacement>
                             <token><![CDATA[</body>]]></token>

js/apps/account-ui/vite.config.ts

@@ -13,6 +13,9 @@ export default defineConfig({
     target: "esnext",
     modulePreload: false,
     cssMinify: "lightningcss",
+    rollupOptions: {
+      external: ["react", "react/jsx-runtime", "react-dom"],
+    },
   },
   plugins: [react(), checker({ typescript: true })],
 });

js/apps/admin-ui/pom.xml

@@ -132,7 +132,19 @@
                         </replacement>
                         <replacement>
                             <token><![CDATA[<title>Keycloak Administration UI</title>]]></token>
-                            <value xml:space="preserve"><![CDATA[<title>${properties.title!"Keycloak Administration UI"}</title>]]></value>
+                            <value xml:space="preserve">
+<![CDATA[
+    <title>${properties.title!"Keycloak Administration UI"}</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "${resourceCommonUrl}/vendor/react/react.production.min.js",
+          "react/jsx-runtime": "${resourceCommonUrl}/vendor/react/react-jsx-runtime.production.min.js",
+          "react-dom": "${resourceCommonUrl}/vendor/react-dom/react-dom.production.min.js"
+        }
+      }
+    </script>
+]]></value>
                         </replacement>
                         <replacement>
                             <token><![CDATA[</body>]]></token>

js/apps/admin-ui/vite.config.ts

@@ -13,6 +13,9 @@ export default defineConfig({
     target: "esnext",
     modulePreload: false,
     cssMinify: "lightningcss",
+    rollupOptions: {
+      external: ["react", "react/jsx-runtime", "react-dom"],
+    },
   },
   plugins: [react(), checker({ typescript: true })],
   test: {

themes/.gitignore

@@ -1 +1,2 @@
 web_modules
+vendor

themes/pom.xml

@@ -207,6 +207,16 @@
                                     <workingDirectory>${dir.common}</workingDirectory>
                                 </configuration>
                             </execution>
+                            <execution>
+                                <id>pnpm-build-common</id>
+                                <goals>
+                                    <goal>pnpm</goal>
+                                </goals>
+                                <configuration>
+                                    <arguments>run build</arguments>
+                                    <workingDirectory>${dir.common}</workingDirectory>
+                                </configuration>
+                            </execution>
                         </executions>
                     </plugin>
                 </plugins>

themes/src/main/resources/theme/keycloak/common/resources/package.json

@@ -1,12 +1,23 @@
 {
   "name": "keycloak-npm-dependencies",
-  "version": "1.0.0",
+  "type": "module",
-  "description": "Keycloak NPM Dependencies",
+  "scripts": {
-  "license": "Apache-2.0",
+    "build": "pnpm build:clean && rollup --config",
-  "repository": "https://github.com/keycloak/keycloak",
+    "build:clean": "shx rm -rf vendor"
+  },
   "dependencies": {
     "jquery": "^3.7.1",
-    "patternfly": "^3.59.5"
+    "patternfly": "^3.59.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "packageManager": "pnpm@8.10.0"
+  "packageManager": "pnpm@8.10.0",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^4.5.0",
+    "shx": "^0.3.4"
+  }
 }

themes/src/main/resources/theme/keycloak/common/resources/rollup.config.js

@@ -0,0 +1,40 @@
+import { defineConfig } from "rollup";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import replace from "@rollup/plugin-replace";
+import terser from "@rollup/plugin-terser";
+
+const plugins = [
+  nodeResolve(),
+  commonjs(),
+  replace({
+    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"),
+  }),
+  terser(),
+];
+
+export default defineConfig([
+  {
+    input: [
+      "node_modules/react/cjs/react.production.min.js",
+      "node_modules/react/cjs/react-jsx-runtime.production.min.js",
+    ],
+    output: {
+      dir: "vendor/react",
+      format: "es",
+    },
+    plugins,
+  },
+  {
+    input: "node_modules/react-dom/cjs/react-dom.production.min.js",
+    output: {
+      dir: "vendor/react-dom",
+      format: "es",
+    },
+    external: ["react"],
+    plugins,
+  },
+]);