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

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20250208084948
+## 0.0.0-next-20250208115611
 
 ### Patch Changes
 
 - 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
+  - @module-federation/sdk@0.0.0-next-20250208115611
+  - @module-federation/bridge-shared@0.0.0-next-20250208115611
 
 ## 0.8.10
 

package/dist/index.cjs.js

@@ -1,26 +1,4 @@
 "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-BwD5jfgB.cjs");
@@ -365,6 +343,20 @@ function createRemoteComponent(info) {
     }
   );
 }
+const isReact18 = ReactDOM.version.startsWith("18");
+function createRoot(container, options) {
+  if (isReact18) {
+    return ReactDOM.createRoot(container, options);
+  }
+  return {
+    render(children) {
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+  };
+}
 function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
@@ -414,13 +406,9 @@ function createBridgeComponent(bridgeInfo) {
             bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
           ).then((root) => rootMap.set(info.dom, root));
         } else {
-          import("react-dom/client").then(
-            (ReactDOMClient) => {
-              const root = ReactDOMClient.createRoot(info.dom);
-              root.render(rootComponentWithErrorBoundary);
-              rootMap.set(info.dom, root);
-            }
-          );
+          const root = 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)) || {};
       },

package/dist/index.es.js

@@ -324,6 +324,20 @@ function createRemoteComponent(info) {
     }
   );
 }
+const isReact18 = ReactDOM.version.startsWith("18");
+function createRoot(container, options) {
+  if (isReact18) {
+    return ReactDOM.createRoot(container, options);
+  }
+  return {
+    render(children) {
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+  };
+}
 function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
@@ -373,13 +387,9 @@ function createBridgeComponent(bridgeInfo) {
             bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
           ).then((root) => rootMap.set(info.dom, root));
         } else {
-          import("react-dom/client").then(
-            (ReactDOMClient) => {
-              const root = ReactDOMClient.createRoot(info.dom);
-              root.render(rootComponentWithErrorBoundary);
-              rootMap.set(info.dom, root);
-            }
-          );
+          const root = 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)) || {};
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250208084948",
+  "version": "0.0.0-next-20250208115611",
   "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-20250208084948",
-    "@module-federation/sdk": "0.0.0-next-20250208084948"
+    "@module-federation/bridge-shared": "0.0.0-next-20250208115611",
+    "@module-federation/sdk": "0.0.0-next-20250208115611"
   },
   "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-20250208084948"
+    "@module-federation/runtime": "0.0.0-next-20250208115611"
   },
   "scripts": {
     "dev": "vite",

package/src/compat.ts

@@ -11,7 +11,6 @@ interface Root {
   unmount(): void;
 }
 
-// Check if we're running React 18
 const isReact18 = ReactDOM.version.startsWith('18');
 
 /**
@@ -27,9 +26,10 @@ export function createRoot(
     return (ReactDOM as any).createRoot(container, options);
   }
 
-  // For React 16, simulate the new root API using render/unmountComponentAtNode
+  // 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() {
@@ -52,9 +52,10 @@ export function hydrateRoot(
     return (ReactDOM as any).hydrateRoot(container, initialChildren, options);
   }
 
-  // For React 16, simulate the new root API using hydrate
+  // 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() {

package/src/provider.tsx

@@ -86,14 +86,9 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
             bridgeInfo?.render(rootComponentWithErrorBoundary, dom),
           ).then((root: RootType) => rootMap.set(info.dom, root));
         } else {
-          // 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);
-            },
-          );
+          const root = createRoot(info.dom);
+          root.render(rootComponentWithErrorBoundary);
+          rootMap.set(info.dom, root);
         }
 
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};