diff --git a/packages/app-store/InstallAppButtonWithoutPlanCheck.tsx b/packages/app-store/InstallAppButtonWithoutPlanCheck.tsx index 44b805b707f47f..76e228c325812f 100644 --- a/packages/app-store/InstallAppButtonWithoutPlanCheck.tsx +++ b/packages/app-store/InstallAppButtonWithoutPlanCheck.tsx @@ -1,11 +1,11 @@ "use client"; +import { useState, useEffect } from "react"; import type { UseAddAppMutationOptions } from "@calcom/app-store/_utils/useAddAppMutation"; import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation"; import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType"; import type { App } from "@calcom/types/App"; -import { InstallAppButtonMap } from "./apps.browser.generated"; import type { InstallAppButtonProps } from "./types"; export const InstallAppButtonWithoutPlanCheck = ( @@ -15,8 +15,36 @@ export const InstallAppButtonWithoutPlanCheck = ( } & InstallAppButtonProps ) => { const mutation = useAddAppMutation(null, props.options); - const key = deriveAppDictKeyFromType(props.type, InstallAppButtonMap); - const InstallAppButtonComponent = InstallAppButtonMap[key as keyof typeof InstallAppButtonMap]; + + const [InstallAppButtonComponent, setInstallAppButtonComponent] = useState(null); + + useEffect(() => { + let isMounted = true; + + async function loadComponent() { + try { + // Dynamic import breaks the webpack bundle chain + const mod = await import("./apps.browser.generated"); + const map = mod.InstallAppButtonMap; + + // Logic from previous version + const key = deriveAppDictKeyFromType(props.type, map); + // @ts-expect-error - The map keys are complex, but this runtime check is safe + const Component = map[key]; + + if (isMounted && Component) { + setInstallAppButtonComponent(() => Component); + } + } catch (e) { + console.error("Failed to load app button map", e); + } + } + + loadComponent(); + + return () => { isMounted = false; }; + }, [props.type]); + if (!InstallAppButtonComponent) return ( <>