fix(bridge-react): the bridge-react package was failing when used with React 16/17 due to missing react-dom/client module (#3500)

Author: danpeen

.changeset/calm-tigers-own.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-react': patch
+---
+
+fix: the bridge-react package was failing when used with React 16 due to missing react-dom/client module

apps/router-demo/router-remote1-2001/package.json

@@ -11,8 +11,8 @@
     "@module-federation/bridge-react": "workspace:*",
     "@module-federation/rsbuild-plugin": "workspace:*",
     "antd": "^5.16.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.4",
     "react-shadow": "^20.4.0"
   },

packages/bridge/bridge-react/src/compat.ts

@@ -0,0 +1,65 @@
+import ReactDOM from 'react-dom';
+
+interface CreateRootOptions {
+  identifierPrefix?: string;
+  onRecoverableError?: (error: unknown) => void;
+  transitionCallbacks?: unknown;
+}
+
+interface Root {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+const isReact18 = ReactDOM.version.startsWith('18');
+
+/**
+ * Creates a root for a container element compatible with both React 16 and 18
+ */
+export function createRoot(
+  container: Element | DocumentFragment,
+  options?: CreateRootOptions,
+): Root {
+  if (isReact18) {
+    // For React 18, use the new createRoot API
+    // @ts-ignore - Types will be available in React 18
+    return (ReactDOM as any).createRoot(container, options);
+  }
+
+  // For React 16/17, simulate the new root API using render/unmountComponentAtNode
+  return {
+    render(children: React.ReactNode) {
+      // @ts-ignore - React 17's render method is deprecated but still functional
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    },
+  };
+}
+
+/**
+ * Hydrates a container compatible with both React 16 and 18
+ */
+export function hydrateRoot(
+  container: Element | DocumentFragment,
+  initialChildren: React.ReactNode,
+  options?: CreateRootOptions,
+): Root {
+  if (isReact18) {
+    // For React 18, use the new hydrateRoot API
+    // @ts-ignore - Types will be available in React 18
+    return (ReactDOM as any).hydrateRoot(container, initialChildren, options);
+  }
+
+  // For React 16/17, simulate the new root API using hydrate
+  return {
+    render(children: React.ReactNode) {
+      // @ts-ignore - React 17's hydrate method is deprecated but still functional
+      ReactDOM.hydrate(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    },
+  };
+}

packages/bridge/bridge-react/src/provider.tsx

@@ -1,15 +1,14 @@
-import { useLayoutEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import ReactDOMClient from 'react-dom/client';
 import type {
   ProviderParams,
   RenderFnParams,
 } from '@module-federation/bridge-shared';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RouterContext } from './context';
-import { LoggerInstance, atLeastReact18 } from './utils';
+import { LoggerInstance } from './utils';
 import { federationRuntime } from './plugin';
+import { createRoot } from './compat';
 
 type RenderParams = RenderFnParams & {
   [key: string]: unknown;
@@ -18,7 +17,7 @@ type DestroyParams = {
   moduleName: string;
   dom: HTMLElement;
 };
-type RootType = HTMLElement | ReactDOMClient.Root;
+type RootType = HTMLElement | ReturnType<typeof createRoot>;
 
 export type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
@@ -67,7 +66,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
 
         const rootComponentWithErrorBoundary = (
-          // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
           <ErrorBoundary FallbackComponent={fallback}>
             <RawComponent
               appInfo={{
@@ -81,53 +79,34 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
             />
           </ErrorBoundary>
         );
-        // call render function
-        if (atLeastReact18(React)) {
-          if (bridgeInfo?.render) {
-            // in case bridgeInfo?.render is an async function, resolve this to promise
-            Promise.resolve(
-              bridgeInfo?.render(rootComponentWithErrorBoundary, dom),
-            ).then((root: RootType) => rootMap.set(info.dom, root));
-          } else {
-            const root: RootType = ReactDOMClient.createRoot(info.dom);
-            root.render(rootComponentWithErrorBoundary);
-            rootMap.set(info.dom, root);
-          }
+
+        if (bridgeInfo?.render) {
+          // in case bridgeInfo?.render is an async function, resolve this to promise
+          Promise.resolve(
+            bridgeInfo?.render(rootComponentWithErrorBoundary, dom),
+          ).then((root: RootType) => rootMap.set(info.dom, root));
         } else {
-          // react 17 render
-          const renderFn = bridgeInfo?.render || ReactDOM.render;
-          renderFn?.(rootComponentWithErrorBoundary, info.dom);
+          const root = createRoot(info.dom);
+          root.render(rootComponentWithErrorBoundary);
+          rootMap.set(info.dom, root);
         }
+
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
 
-      async destroy(info: DestroyParams) {
-        LoggerInstance.debug(`createBridgeComponent destroy Info`, {
-          dom: info.dom,
-        });
-        instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit(info);
-
-        // call destroy function
-        if (atLeastReact18(React)) {
-          const root = rootMap.get(info.dom);
-          (root as ReactDOMClient.Root)?.unmount();
+      destroy(info: DestroyParams) {
+        LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
+        const root = rootMap.get(info.dom);
+        if (root) {
+          if ('unmount' in root) {
+            root.unmount();
+          } else {
+            ReactDOM.unmountComponentAtNode(root as HTMLElement);
+          }
           rootMap.delete(info.dom);
-        } else {
-          ReactDOM.unmountComponentAtNode(info.dom);
         }
-
-        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
+        instance?.bridgeHook?.lifecycle?.destroyBridge?.emit(info);
       },
-      rawComponent: bridgeInfo.rootComponent,
-      __BRIDGE_FN__: (_args: T) => {},
     };
   };
 }
-
-export function ShadowRoot(info: { children: () => JSX.Element }) {
-  const [root] = useState(null);
-  const domRef = useRef(null);
-  useLayoutEffect(() => {});
-
-  return <div ref={domRef}>{root && <info.children />}</div>;
-}