AIP-68 Fix multiple react app plugins

airflow-core/src/airflow/ui/src/pages/ReactPlugin.tsx

@@ -24,27 +24,37 @@ import type { ReactAppResponse } from "openapi/requests/types.gen";
 
 import { ErrorPage } from "./Error";
 
+type PluginComponentType = FC<{
+  dagId?: string;
+  mapIndex?: string;
+  runId?: string;
+  taskId?: string;
+}>;
+
 export const ReactPlugin = ({ reactApp }: { readonly reactApp: ReactAppResponse }) => {
   const { dagId, mapIndex, runId, taskId } = useParams();
 
   const Plugin = lazy(() =>
     // We are assuming the plugin manager is trusted and the bundle_url is safe
     import(/* @vite-ignore */ reactApp.bundle_url)
       .then(() => {
-        const component = (
-          globalThis as unknown as {
-            AirflowPlugin: FC<{
-              dagId?: string;
-              mapIndex?: string;
-              runId?: string;
-              taskId?: string;
-            }>;
-          }
-        ).AirflowPlugin;
+        // Store components in globalThis[reactApp.name] to avoid conflicts with the shared globalThis.AirflowPlugin
+        // global variable.
+        let pluginComponent = (globalThis as Record<string, unknown>)[reactApp.name] as
+          | PluginComponentType
+          | undefined;
 
-        return {
-          default: component,
-        };
+        if (pluginComponent === undefined) {
+          pluginComponent = (globalThis as Record<string, unknown>).AirflowPlugin as PluginComponentType;
+
+          (globalThis as Record<string, unknown>)[reactApp.name] = pluginComponent;
+        }
+
+        if (typeof pluginComponent !== "function") {
+          throw new TypeError(`Expected function, got ${typeof pluginComponent} for plugin ${reactApp.name}`);
+        }
+
+        return { default: pluginComponent };
       })
       .catch((error: unknown) => {
         console.error("Component Failed Loading:", error);