use custom polyfill for path.join (fix webpack 5 build)

src/lib/components/LoginOtp.tsx

@@ -4,7 +4,7 @@ import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
 import { headInsert } from "../tools/headInsert";
-import { join as pathJoin } from "path";
+import { pathJoin } from "../tools/pathJoin";
 import { useCssAndCx } from "tss-react";
 
 export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginOtp } & KcProps) => {

src/lib/getKcContext/kcContextMocks/kcContextMocks.ts

@@ -5,7 +5,7 @@ import { getKcLanguageTagLabel } from "../../i18n/KcLanguageTag";
 //NOTE: Aside because we want to be able to import them from node
 import { resourcesCommonPath, resourcesPath } from "./urlResourcesPath";
 import { id } from "tsafe/id";
-import { join as pathJoin } from "path";
+import { pathJoin } from "../../tools/pathJoin";
 
 const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";
 

src/lib/getKcContext/kcContextMocks/urlResourcesPath.ts

@@ -1,5 +1,5 @@
-import { join as pathJoin } from "path";
+import { pathJoin } from "../../tools/pathJoin";
 
 export const subDirOfPublicDirBasename = "keycloak_static";
-export const resourcesPath = pathJoin(subDirOfPublicDirBasename, "/resources");
-export const resourcesCommonPath = pathJoin(subDirOfPublicDirBasename, "/resources_common");
+export const resourcesPath = pathJoin(subDirOfPublicDirBasename, "resources");
+export const resourcesCommonPath = pathJoin(subDirOfPublicDirBasename, "resources_common");

src/lib/tools/pathJoin.ts

@@ -0,0 +1,3 @@
+export function pathJoin(...path: string[]): string {
+    return path.map(part => part.replace(/^\/+/, "").replace(/\/+$/, "")).join("/");
+}