fix: #23104 Circular Dependencies

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<React.ElementType | null>(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 (
       <>