https://github.com/keycloakify/keycloakify-starter/pull/6 https://github.com/keycloakify/keycloakify/pull/324 https://github.com/keycloakify/keycloakify-starter/pull/5 https://github.com/keycloakify/keycloakify/issues/271

src/BASE_URL.ts

@@ -3,12 +3,12 @@ import { kcContext as kcLoginThemeContext } from "keycloak-theme/login/kcContext
 import { kcContext as kcAccountThemeContext } from "keycloak-theme/login/kcContext";
 
 /**
- * If you need to use process.env.PUBLIC_URL, use this variable instead.  
+ * If you need to use import.meta.env.BASE_URL, use this variable instead.  
  * If you can, import your assets using the import statement.
  * 
  * See: https://docs.keycloakify.dev/importing-assets#importing-custom-assets-that-arent-fonts
  */
-export const PUBLIC_URL = (()=>{
+export const BASE_URL = (()=>{
 
     const kcContext = (()=>{
 
@@ -25,7 +25,7 @@ export const PUBLIC_URL = (()=>{
     })();
 
     return (kcContext === undefined || process.env.NODE_ENV === "development")
-        ? process.env.PUBLIC_URL
+        ? import.meta.env.BASE_URL
         : `${kcContext.url.resourcesPath}/build`;
 
 })();

src/main.tsx

@@ -32,3 +32,4 @@ createRoot(document.getElementById("root")!).render(
         </Suspense>
     </StrictMode>
 );
+

src/vite-env.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react-scripts" />
+/// <reference types="vite/client" />
+
 declare module "*.md" {
     const src: string;
     export default src;
-}
+}