@module-federation/bridge-react 0.0.0-next-20250126041131 → 0.0.0-next-20250208084948

package/CHANGELOG.md

@@ -1,11 +1,20 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20250126041131
+## 0.0.0-next-20250208084948
 
 ### Patch Changes
 
-- @module-federation/sdk@0.0.0-next-20250126041131
-- @module-federation/bridge-shared@0.0.0-next-20250126041131
+- c3387db: fix: the bridge-react package was failing when used with React 16 due to missing react-dom/client module
+  - @module-federation/sdk@0.0.0-next-20250208084948
+  - @module-federation/bridge-shared@0.0.0-next-20250208084948
+
+## 0.8.10
+
+### Patch Changes
+
+- e751ad0: change rollup config to prevent react-dom/client code being bundled into the bridge-react package
+  - @module-federation/sdk@0.8.10
+  - @module-federation/bridge-shared@0.8.10
 
 ## 0.8.9
 

package/dist/{context-DS0wRSh7.cjs → context-BwD5jfgB.cjs}

@@ -323,18 +323,6 @@ createLogger(PREFIX);
 const LoggerInstance = createLogger(
   "[ Module Federation Bridge React ]"
 );
-function atLeastReact18(React2) {
-  if (React2 && typeof React2.version === "string" && React2.version.indexOf(".") >= 0) {
-    const majorVersionString = React2.version.split(".")[0];
-    try {
-      return Number(majorVersionString) >= 18;
-    } catch (err) {
-      return false;
-    }
-  } else {
-    return false;
-  }
-}
 function pathJoin(...args) {
   const res = args.reduce((res2, path) => {
     let nPath = path;
@@ -372,6 +360,5 @@ const getRootDomDefaultClassName = (moduleName) => {
 const RouterContext = React.createContext(null);
 exports.LoggerInstance = LoggerInstance;
 exports.RouterContext = RouterContext;
-exports.atLeastReact18 = atLeastReact18;
 exports.getRootDomDefaultClassName = getRootDomDefaultClassName;
 exports.pathJoin = pathJoin;

package/dist/{context-BgBVJ06L.js → context-BwUPFSB2.js}

@@ -322,18 +322,6 @@ createLogger(PREFIX);
 const LoggerInstance = createLogger(
   "[ Module Federation Bridge React ]"
 );
-function atLeastReact18(React2) {
-  if (React2 && typeof React2.version === "string" && React2.version.indexOf(".") >= 0) {
-    const majorVersionString = React2.version.split(".")[0];
-    try {
-      return Number(majorVersionString) >= 18;
-    } catch (err) {
-      return false;
-    }
-  } else {
-    return false;
-  }
-}
 function pathJoin(...args) {
   const res = args.reduce((res2, path) => {
     let nPath = path;
@@ -372,7 +360,6 @@ const RouterContext = React__default.createContext(null);
 export {
   LoggerInstance as L,
   RouterContext as R,
-  atLeastReact18 as a,
   getRootDomDefaultClassName as g,
   pathJoin as p
 };

package/dist/index.cjs.js

@@ -1,7 +1,29 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const context = require("./context-DS0wRSh7.cjs");
+const context = require("./context-BwD5jfgB.cjs");
 const ReactRouterDOM = require("react-router-dom");
 const plugin = require("./plugin.cjs.js");
 const ReactDOM = require("react-dom");
@@ -212,7 +234,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.8.9";
+  RemoteApp2["__APP_VERSION__"] = "0.8.10";
   return /* @__PURE__ */ React.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -295,14 +317,14 @@ function createLazyRemoteComponent(info) {
       exportName
     });
     try {
-      const m2 = await info.loader();
-      const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+      const m = await info.loader();
+      const moduleName = m && m[Symbol.for("mf_module_id")];
       context.LoggerInstance.debug(
         `createRemoteComponent LazyComponent loadRemote info >>>`,
-        { name: moduleName, module: m2, exportName }
+        { name: moduleName, module: m, exportName }
       );
-      const exportFn = m2[exportName];
-      if (exportName in m2 && typeof exportFn === "function") {
+      const exportFn = m[exportName];
+      if (exportName in m && typeof exportFn === "function") {
         const RemoteAppComponent = React.forwardRef((props, ref) => {
           return /* @__PURE__ */ React.createElement(
             RemoteApp,
@@ -322,7 +344,7 @@ function createLazyRemoteComponent(info) {
       } else {
         context.LoggerInstance.debug(
           `createRemoteComponent LazyComponent module not found >>>`,
-          { name: moduleName, module: m2, exportName }
+          { name: moduleName, module: m, exportName }
         );
         throw Error(
           `Make sure that ${moduleName} has the correct export when export is ${String(
@@ -343,30 +365,6 @@ function createRemoteComponent(info) {
     }
   );
 }
-var client = {};
-var m = ReactDOM;
-if (process.env.NODE_ENV === "production") {
-  client.createRoot = m.createRoot;
-  client.hydrateRoot = m.hydrateRoot;
-} else {
-  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  client.createRoot = function(c, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return m.createRoot(c, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-  client.hydrateRoot = function(c, h, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return m.hydrateRoot(c, h, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-}
 function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
@@ -400,53 +398,45 @@ function createBridgeComponent(bridgeInfo) {
           ...propsInfo
         } = info;
         const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
-        const rootComponentWithErrorBoundary = (
-          // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
-          /* @__PURE__ */ React__namespace.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React__namespace.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename,
-                memoryRoute
-              },
-              propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
-            }
-          ))
-        );
-        if (context.atLeastReact18(React__namespace)) {
-          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            Promise.resolve(
-              bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-            ).then((root) => rootMap.set(info.dom, root));
-          } else {
-            const root = client.createRoot(info.dom);
-            root.render(rootComponentWithErrorBoundary);
-            rootMap.set(info.dom, root);
+        const rootComponentWithErrorBoundary = /* @__PURE__ */ React__namespace.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React__namespace.createElement(
+          RawComponent,
+          {
+            appInfo: {
+              moduleName,
+              basename,
+              memoryRoute
+            },
+            propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
           }
+        ));
+        if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
+          Promise.resolve(
+            bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
+          ).then((root) => rootMap.set(info.dom, root));
         } else {
-          const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
-          renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
+          import("react-dom/client").then(
+            (ReactDOMClient) => {
+              const root = ReactDOMClient.createRoot(info.dom);
+              root.render(rootComponentWithErrorBoundary);
+              rootMap.set(info.dom, root);
+            }
+          );
         }
         ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
       },
-      async destroy(info) {
-        var _a, _b, _c, _d, _e, _f;
-        context.LoggerInstance.debug(`createBridgeComponent destroy Info`, {
-          dom: info.dom
-        });
-        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy) == null ? void 0 : _c.emit(info);
-        if (context.atLeastReact18(React__namespace)) {
-          const root = rootMap.get(info.dom);
-          root == null ? void 0 : root.unmount();
+      destroy(info) {
+        var _a, _b, _c;
+        context.LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
+        const root = rootMap.get(info.dom);
+        if (root) {
+          if ("unmount" in root) {
+            root.unmount();
+          } else {
+            ReactDOM.unmountComponentAtNode(root);
+          }
           rootMap.delete(info.dom);
-        } else {
-          ReactDOM.unmountComponentAtNode(info.dom);
         }
-        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info);
-      },
-      rawComponent: bridgeInfo.rootComponent,
-      __BRIDGE_FN__: (_args) => {
+        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.destroyBridge) == null ? void 0 : _c.emit(info);
       }
     };
   };

package/dist/index.d.ts

@@ -1,19 +1,27 @@
 import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
-import { default as default_3 } from 'react-dom/client';
 import { ErrorInfo } from 'react';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 
 export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
-    destroy(info: DestroyParams): Promise<void>;
-    rawComponent: React_2.ComponentType<T>;
-    __BRIDGE_FN__: (_args: T) => void;
+    destroy(info: DestroyParams): void;
 };
 
 export declare function createRemoteComponent<T, E extends keyof T>(info: LazyRemoteComponentInfo<T, E>): default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<ProviderParams & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})> & default_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Creates a root for a container element compatible with both React 16 and 18
+ */
+declare function createRoot(container: Element | DocumentFragment, options?: CreateRootOptions): Root;
+
+declare interface CreateRootOptions {
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+    transitionCallbacks?: unknown;
+}
+
 declare type DestroyParams = {
     moduleName: string;
     dom: HTMLElement;
@@ -73,6 +81,11 @@ declare type RenderParams = RenderFnParams & {
     [key: string]: unknown;
 };
 
-declare type RootType = HTMLElement | default_3.Root;
+declare interface Root {
+    render(children: React.ReactNode): void;
+    unmount(): void;
+}
+
+declare type RootType = HTMLElement | ReturnType<typeof createRoot>;
 
 export { }

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { createContext, Component, createElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
-import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, a as atLeastReact18, R as RouterContext } from "./context-BgBVJ06L.js";
+import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, R as RouterContext } from "./context-BwUPFSB2.js";
 import * as ReactRouterDOM from "react-router-dom";
 import { federationRuntime } from "./plugin.es.js";
 import ReactDOM from "react-dom";
@@ -193,7 +193,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.8.9";
+  RemoteApp2["__APP_VERSION__"] = "0.8.10";
   return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -276,14 +276,14 @@ function createLazyRemoteComponent(info) {
       exportName
     });
     try {
-      const m2 = await info.loader();
-      const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+      const m = await info.loader();
+      const moduleName = m && m[Symbol.for("mf_module_id")];
       LoggerInstance.debug(
         `createRemoteComponent LazyComponent loadRemote info >>>`,
-        { name: moduleName, module: m2, exportName }
+        { name: moduleName, module: m, exportName }
       );
-      const exportFn = m2[exportName];
-      if (exportName in m2 && typeof exportFn === "function") {
+      const exportFn = m[exportName];
+      if (exportName in m && typeof exportFn === "function") {
         const RemoteAppComponent = forwardRef((props, ref) => {
           return /* @__PURE__ */ React__default.createElement(
             RemoteApp,
@@ -303,7 +303,7 @@ function createLazyRemoteComponent(info) {
       } else {
         LoggerInstance.debug(
           `createRemoteComponent LazyComponent module not found >>>`,
-          { name: moduleName, module: m2, exportName }
+          { name: moduleName, module: m, exportName }
         );
         throw Error(
           `Make sure that ${moduleName} has the correct export when export is ${String(
@@ -324,30 +324,6 @@ function createRemoteComponent(info) {
     }
   );
 }
-var client = {};
-var m = ReactDOM;
-if (process.env.NODE_ENV === "production") {
-  client.createRoot = m.createRoot;
-  client.hydrateRoot = m.hydrateRoot;
-} else {
-  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  client.createRoot = function(c, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return m.createRoot(c, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-  client.hydrateRoot = function(c, h, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return m.hydrateRoot(c, h, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-}
 function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
@@ -381,53 +357,45 @@ function createBridgeComponent(bridgeInfo) {
           ...propsInfo
         } = info;
         const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
-        const rootComponentWithErrorBoundary = (
-          // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
-          /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename,
-                memoryRoute
-              },
-              propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
-            }
-          ))
-        );
-        if (atLeastReact18(React)) {
-          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            Promise.resolve(
-              bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-            ).then((root) => rootMap.set(info.dom, root));
-          } else {
-            const root = client.createRoot(info.dom);
-            root.render(rootComponentWithErrorBoundary);
-            rootMap.set(info.dom, root);
+        const rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
+          RawComponent,
+          {
+            appInfo: {
+              moduleName,
+              basename,
+              memoryRoute
+            },
+            propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
           }
+        ));
+        if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
+          Promise.resolve(
+            bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
+          ).then((root) => rootMap.set(info.dom, root));
         } else {
-          const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
-          renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
+          import("react-dom/client").then(
+            (ReactDOMClient) => {
+              const root = ReactDOMClient.createRoot(info.dom);
+              root.render(rootComponentWithErrorBoundary);
+              rootMap.set(info.dom, root);
+            }
+          );
         }
         ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
       },
-      async destroy(info) {
-        var _a, _b, _c, _d, _e, _f;
-        LoggerInstance.debug(`createBridgeComponent destroy Info`, {
-          dom: info.dom
-        });
-        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy) == null ? void 0 : _c.emit(info);
-        if (atLeastReact18(React)) {
-          const root = rootMap.get(info.dom);
-          root == null ? void 0 : root.unmount();
+      destroy(info) {
+        var _a, _b, _c;
+        LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
+        const root = rootMap.get(info.dom);
+        if (root) {
+          if ("unmount" in root) {
+            root.unmount();
+          } else {
+            ReactDOM.unmountComponentAtNode(root);
+          }
           rootMap.delete(info.dom);
-        } else {
-          ReactDOM.unmountComponentAtNode(info.dom);
         }
-        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info);
-      },
-      rawComponent: bridgeInfo.rootComponent,
-      __BRIDGE_FN__: (_args) => {
+        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.destroyBridge) == null ? void 0 : _c.emit(info);
       }
     };
   };

package/dist/router-v5.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom$1 = require("react-router-dom/index.js");
-const context = require("./context-DS0wRSh7.cjs");
+const context = require("./context-BwD5jfgB.cjs");
 const ReactRouterDom = require("react-router-dom/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/router-v5.es.js

@@ -1,6 +1,6 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom$1 from "react-router-dom/index.js";
-import { R as RouterContext, L as LoggerInstance } from "./context-BgBVJ06L.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BwUPFSB2.js";
 export * from "react-router-dom/index.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;

package/dist/router-v6.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom$1 = require("react-router-dom/dist/index.js");
-const context = require("./context-DS0wRSh7.cjs");
+const context = require("./context-BwD5jfgB.cjs");
 const ReactRouterDom = require("react-router-dom/dist/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/router-v6.es.js

@@ -1,6 +1,6 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom$1 from "react-router-dom/dist/index.js";
-import { R as RouterContext, L as LoggerInstance } from "./context-BgBVJ06L.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BwUPFSB2.js";
 export * from "react-router-dom/dist/index.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;

package/dist/router.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom = require("react-router-dom/");
-const context = require("./context-DS0wRSh7.cjs");
+const context = require("./context-BwD5jfgB.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/router.es.js

@@ -1,7 +1,7 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom from "react-router-dom/";
 export * from "react-router-dom/";
-import { R as RouterContext, L as LoggerInstance } from "./context-BgBVJ06L.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BwUPFSB2.js";
 function WrapperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250126041131",
+  "version": "0.0.0-next-20250208084948",
   "publishConfig": {
     "access": "public"
   },
@@ -46,8 +46,8 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.0.0-next-20250126041131",
-    "@module-federation/sdk": "0.0.0-next-20250126041131"
+    "@module-federation/bridge-shared": "0.0.0-next-20250208084948",
+    "@module-federation/sdk": "0.0.0-next-20250208084948"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -68,7 +68,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.14",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.0.0-next-20250126041131"
+    "@module-federation/runtime": "0.0.0-next-20250208084948"
   },
   "scripts": {
     "dev": "vite",

package/src/compat.ts

@@ -0,0 +1,64 @@
+import ReactDOM from 'react-dom';
+
+interface CreateRootOptions {
+  identifierPrefix?: string;
+  onRecoverableError?: (error: unknown) => void;
+  transitionCallbacks?: unknown;
+}
+
+interface Root {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+// Check if we're running React 18
+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, simulate the new root API using render/unmountComponentAtNode
+  return {
+    render(children: React.ReactNode) {
+      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, simulate the new root API using hydrate
+  return {
+    render(children: React.ReactNode) {
+      ReactDOM.hydrate(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    },
+  };
+}

package/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,39 @@ 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);
+          // Dynamically import react-dom/client
+          import('react-dom/client').then(
+            (ReactDOMClient: typeof import('react-dom/client')) => {
+              const root = ReactDOMClient.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>;
-}

package/vite.config.ts

@@ -33,6 +33,7 @@ export default defineConfig({
       external: [
         ...perDepsKeys,
         '@remix-run/router',
+        /react-dom\/.*/,
         'react-router',
         'react-router-dom/',
         'react-router-dom/index.js',