Move the entrypoint into kc.gen.tsx

src/kc.gen.tsx

@@ -0,0 +1,47 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by Keycloakify
+
+import { lazy, Suspense, type ReactNode } from "react";
+
+export type ThemeName = "keycloakify-starter";
+
+export const themeNames: ThemeName[] = ["keycloakify-starter"];
+
+export type KcEnvName = never;
+
+export const kcEnvNames: KcEnvName[] = [];
+
+export const kcEnvDefaults: Record<KcEnvName, string> = {};
+
+type KcContext = import("./login/KcContext").KcContext;
+
+declare global {
+    interface Window {
+        kcContext?: KcContext;
+    }
+}
+
+export const KcLoginPage = lazy(() => import("./login/KcPage"));
+
+export function KcPage(props: { kcContext: KcContext; fallback?: ReactNode }) {
+    const { kcContext, fallback } = props;
+    return (
+        <Suspense fallback={fallback}>
+            {(() => {
+                switch (kcContext.themeType) {
+                    case "login":
+                        return <KcLoginPage kcContext={kcContext} />;
+                }
+            })()}
+        </Suspense>
+    );
+}
+
+/* prettier-ignore-end */

src/main.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-refresh/only-export-components */
 import { createRoot } from "react-dom/client";
-import { StrictMode, lazy, Suspense } from "react";
+import { StrictMode } from "react";
+import { KcPage } from "./kc.gen";
 
 // The following block can be uncommented to test a specific page with `yarn dev`
 // Don't forget to comment back or your bundle size will increase
@@ -15,29 +16,12 @@ if (import.meta.env.DEV) {
 }
 */
 
-const KcLoginThemePage = lazy(() => import("./login/KcPage"));
-//const KcAccountThemePage = lazy(() => import("./account/KcPage"));
-
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
-        <Suspense>
+        {!window.kcContext ? (
-            {(() => {
+            <h1>No Keycloak Context</h1>
-                switch (window.kcContext?.themeType) {
+        ) : (
-                    case "login":
+            <KcPage kcContext={window.kcContext} />
-                        return <KcLoginThemePage kcContext={window.kcContext} />;
+        )}
-                    //case "account":
-                    //    return <KcAccountThemePage kcContext={window.kcContext} />;
-                }
-                return <h1>No Keycloak Context</h1>;
-            })()}
-        </Suspense>
     </StrictMode>
 );
-
-declare global {
-    interface Window {
-        kcContext?:
-            | import("./login/KcContext").KcContext
-            //| import("./account/KcContext").KcContext;
-    }
-}

vite.config.ts

@@ -4,7 +4,10 @@ import { keycloakify } from "keycloakify/vite-plugin";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [react(), keycloakify({
+    plugins: [
-        accountThemeImplementation: "none"
+        react(),
-    })]
+        keycloakify({
+            accountThemeImplementation: "none"
+        })
+    ]
 });