fix(keycloak-theme): force build to resolve React from package path (#2353)

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

Author: kapetr

apps/keycloak-theme/vite.config.ts

@@ -3,62 +3,66 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import react from "@vitejs/plugin-react";
-import { keycloakify } from "keycloakify/vite-plugin";
-import path from "path";
-import { defineConfig } from "vite";
-import { viteStaticCopy } from "vite-plugin-static-copy";
-import svgr from "vite-plugin-svgr";
+import react from '@vitejs/plugin-react';
+import { keycloakify } from 'keycloakify/vite-plugin';
+import { createRequire } from 'module';
+import path from 'path';
+import { defineConfig } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import svgr from 'vite-plugin-svgr';
 
-const THEME_NAME_AGENTSTACK = "agentstack";
-const THEME_NAME_AGENTSTACK_SSO = "agentstack-sso";
+const THEME_NAME_AGENTSTACK = 'agentstack';
+const THEME_NAME_AGENTSTACK_SSO = 'agentstack-sso';
+const require = createRequire(import.meta.url);
+
+const resolvePackageDir = (packageName: string) => path.dirname(require.resolve(`${packageName}/package.json`));
 
 export default defineConfig({
   define: {
-    "import.meta.env.VITE_APP_NAME": JSON.stringify(
-      process.env.APP_NAME || "Agent Stack",
-    ),
+    'import.meta.env.VITE_APP_NAME': JSON.stringify(process.env.APP_NAME || 'Agent Stack'),
   },
   plugins: [
     react(),
     svgr(),
     viteStaticCopy({
       targets: [
         {
-          src: path.join(
-            __dirname,
-            "node_modules/@ibm/plex/IBM-Plex-Sans/fonts/split/woff2/*.woff2",
-          ),
-          dest: "assets/~@ibm/plex/IBM-Plex-Sans/fonts/split/woff2",
+          src: path.join(__dirname, 'node_modules/@ibm/plex/IBM-Plex-Sans/fonts/split/woff2/*.woff2'),
+          dest: 'assets/~@ibm/plex/IBM-Plex-Sans/fonts/split/woff2',
         },
       ],
     }),
     keycloakify({
-      accountThemeImplementation: "none",
+      accountThemeImplementation: 'none',
       themeName: [THEME_NAME_AGENTSTACK, THEME_NAME_AGENTSTACK_SSO],
     }),
   ],
   css: {
     modules: {
-      generateScopedName: "[name]__[local]__[hash:base64:5]",
+      generateScopedName: '[name]__[local]__[hash:base64:5]',
     },
     preprocessorOptions: {
       scss: {
-        api: "modern",
+        api: 'modern',
         quietDeps: true,
         additionalData: `@use 'styles/common' as *; @use 'sass:math';`,
         includePaths: [
-          path.join(__dirname, "node_modules"),
-          path.join(__dirname, "src"),
-          path.join(__dirname, "../agentstack-ui/src"),
+          path.join(__dirname, 'node_modules'),
+          path.join(__dirname, 'src'),
+          path.join(__dirname, '../agentstack-ui/src'),
         ],
-        loadPaths: [path.join(__dirname, "../agentstack-ui/src")],
+        loadPaths: [path.join(__dirname, '../agentstack-ui/src')],
       },
     },
   },
   resolve: {
+    dedupe: ['react', 'react-dom'],
     alias: {
-      styles: path.resolve(__dirname, "../agentstack-ui/src/styles"),
+      react: resolvePackageDir('react'),
+      'react/jsx-runtime': require.resolve('react/jsx-runtime'),
+      'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
+      'react-dom': resolvePackageDir('react-dom'),
+      styles: path.resolve(__dirname, '../agentstack-ui/src/styles'),
     },
   },
 });