@module-federation/bridge-react 0.0.0-next-20250408024819 → 0.0.0-next-20250408084324

package/CHANGELOG.md

@@ -1,26 +1,20 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20250408024819
+## 0.0.0-next-20250408084324
 
 ### Patch Changes
 
-- chore: bump next
-  - @module-federation/sdk@0.0.0-next-20250408024819
-  - @module-federation/bridge-shared@0.0.0-next-20250408024819
+- @module-federation/sdk@0.0.0-next-20250408084324
+- @module-federation/bridge-shared@0.0.0-next-20250408084324
 
-## 0.12.0
-
-### Minor Changes
-
-- 8b3f9d0: feat(react-bridge): Add native support for React 19 in bridge-react with enhanced createRoot options
+## 0.11.4
 
 ### Patch Changes
 
-- 8b3f9d0: feat(bridge-react): support react v19 in react compat file.
 - Updated dependencies [64a2bc1]
 - Updated dependencies [c14842f]
-  - @module-federation/sdk@0.12.0
-  - @module-federation/bridge-shared@0.12.0
+  - @module-federation/sdk@0.11.4
+  - @module-federation/bridge-shared@0.11.4
 
 ## 0.11.3
 

package/dist/index.cjs.js

@@ -1,27 +1,5 @@
 "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
-));
-var _a, _b;
+var _a;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const context = require("./context-C79iMWYD.cjs");
@@ -168,13 +146,13 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
     providerInfoRef.current = providerReturn;
     setInitialized(true);
     return () => {
-      var _a2, _b2, _c, _d, _e, _f, _g, _h;
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
       if ((_a2 = providerInfoRef.current) == null ? void 0 : _a2.destroy) {
         context.LoggerInstance.debug(
           `createRemoteComponent LazyComponent destroy >>>`,
           { moduleName, basename, dom: renderDom.current }
         );
-        (_d = (_c = (_b2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b2.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+        (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
           moduleName,
           dom: renderDom.current,
           basename,
@@ -198,7 +176,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
     };
   }, [moduleName]);
   React.useEffect(() => {
-    var _a2, _b2, _c, _d, _e, _f;
+    var _a2, _b, _c, _d, _e, _f;
     if (!initialized || !providerInfoRef.current) return;
     let renderProps = {
       moduleName,
@@ -209,7 +187,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
       ...resProps
     };
     renderDom.current = rootRef.current;
-    const beforeBridgeRenderRes = ((_c = (_b2 = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b2.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
+    const beforeBridgeRenderRes = ((_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
     renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
     providerInfoRef.current.render(renderProps);
     (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
@@ -344,40 +322,10 @@ function createRemoteComponent(info) {
   });
 }
 const isReact18 = (_a = ReactDOM.version) == null ? void 0 : _a.startsWith("18");
-const isReact19 = (_b = ReactDOM.version) == null ? void 0 : _b.startsWith("19");
-let reactDOMClientPromise = null;
-async function loadReactDOMClient() {
-  if (!isReact19) return null;
-  if (!reactDOMClientPromise) {
-    reactDOMClientPromise = import("react-dom/client");
+function createRoot(container, options) {
+  if (isReact18) {
+    return ReactDOM.createRoot(container, options);
   }
-  return reactDOMClientPromise;
-}
-function createReact19Root(container, options) {
-  loadReactDOMClient();
-  return {
-    render(children) {
-      loadReactDOMClient().then((client) => {
-        if (client && client.createRoot) {
-          const root = client.createRoot(container, options);
-          root.render(children);
-        }
-      });
-    },
-    unmount() {
-      loadReactDOMClient().then((client) => {
-        if (client && client.createRoot) {
-          const root = client.createRoot(container, options);
-          root.unmount();
-        }
-      });
-    }
-  };
-}
-function createReact18Root(container, options) {
-  return ReactDOM.createRoot(container, options);
-}
-function createReact16Or17Root(container) {
   return {
     render(children) {
       ReactDOM.render(children, container);
@@ -387,18 +335,8 @@ function createReact16Or17Root(container) {
     }
   };
 }
-function createRoot(container, options) {
-  if (isReact19) {
-    return createReact19Root(container, options);
-  }
-  if (isReact18) {
-    return createReact18Root(container, options);
-  }
-  return createReact16Or17Root(container);
-}
 function createBridgeComponent({
   createRoot: createRoot$1 = createRoot,
-  defaultRootOptions,
   ...bridgeInfo
 }) {
   return () => {
@@ -422,7 +360,7 @@ function createBridgeComponent({
     };
     return {
       async render(info) {
-        var _a2, _b2, _c, _d, _e, _f;
+        var _a2, _b, _c, _d, _e, _f;
         context.LoggerInstance.debug(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -430,14 +368,9 @@ function createBridgeComponent({
           basename,
           memoryRoute,
           fallback,
-          rootOptions,
           ...propsInfo
         } = info;
-        const mergedRootOptions = {
-          ...defaultRootOptions,
-          ...rootOptions
-        };
-        const beforeBridgeRenderRes = ((_c = (_b2 = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b2.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
+        const beforeBridgeRenderRes = ((_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
         const rootComponentWithErrorBoundary = /* @__PURE__ */ React__namespace.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React__namespace.createElement(
           RawComponent,
           {
@@ -446,10 +379,7 @@ function createBridgeComponent({
               basename,
               memoryRoute
             },
-            propsInfo: {
-              ...propsInfo,
-              ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
-            }
+            propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
           }
         ));
         if (bridgeInfo.render) {
@@ -459,7 +389,7 @@ function createBridgeComponent({
         } else {
           let root = rootMap.get(dom);
           if (!root) {
-            root = createRoot$1(dom, mergedRootOptions);
+            root = createRoot$1(dom);
             rootMap.set(dom, root);
           }
           if ("render" in root) {
@@ -469,7 +399,7 @@ function createBridgeComponent({
         ((_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)) || {};
       },
       destroy(info) {
-        var _a2, _b2, _c;
+        var _a2, _b, _c;
         const { dom } = info;
         context.LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(dom);
@@ -481,7 +411,7 @@ function createBridgeComponent({
           }
           rootMap.delete(dom);
         }
-        (_c = (_b2 = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b2.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
+        (_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
       }
     };
   };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { default as default_2 } from 'react';
 import * as React_2 from 'react';
 
-export declare function createBridgeComponent<T>({ createRoot, defaultRootOptions, ...bridgeInfo }: ProviderFnParams<T>): () => {
+export declare function createBridgeComponent<T>({ createRoot, ...bridgeInfo }: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
     destroy(info: DestroyParams): void;
 };
@@ -34,16 +34,6 @@ declare interface ProviderFnParams<T> {
     rootComponent: React_2.ComponentType<T>;
     render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
     createRoot?: (container: Element | DocumentFragment, options?: CreateRootOptions) => Root;
-    /**
-     * Default options to pass to createRoot for React 18 and 19
-     * These options will be used when creating a root unless overridden by rootOptions in render params
-     * @example
-     * {
-     *   identifierPrefix: 'app-',
-     *   onRecoverableError: (err) => console.error(err)
-     * }
-     */
-    defaultRootOptions?: CreateRootOptions;
 }
 
 /**
@@ -107,15 +97,6 @@ export declare interface RenderParams {
         initialState?: Record<string, unknown>;
     };
     dom: HTMLElement;
-    /**
-     * Options to pass to createRoot for React 18 and 19
-     * @example
-     * {
-     *   identifierPrefix: 'app-',
-     *   onRecoverableError: (err) => console.error(err)
-     * }
-     */
-    rootOptions?: CreateRootOptions;
     [key: string]: unknown;
 }
 

package/dist/index.es.js

@@ -1,4 +1,4 @@
-var _a, _b;
+var _a;
 import * as React from "react";
 import React__default, { createContext, Component, createElement, forwardRef, useRef, useState, useEffect, useContext } from "react";
 import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, R as RouterContext } from "./context-Dbqf0szX.js";
@@ -127,13 +127,13 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
     providerInfoRef.current = providerReturn;
     setInitialized(true);
     return () => {
-      var _a2, _b2, _c, _d, _e, _f, _g, _h;
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
       if ((_a2 = providerInfoRef.current) == null ? void 0 : _a2.destroy) {
         LoggerInstance.debug(
           `createRemoteComponent LazyComponent destroy >>>`,
           { moduleName, basename, dom: renderDom.current }
         );
-        (_d = (_c = (_b2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b2.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+        (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
           moduleName,
           dom: renderDom.current,
           basename,
@@ -157,7 +157,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
     };
   }, [moduleName]);
   useEffect(() => {
-    var _a2, _b2, _c, _d, _e, _f;
+    var _a2, _b, _c, _d, _e, _f;
     if (!initialized || !providerInfoRef.current) return;
     let renderProps = {
       moduleName,
@@ -168,7 +168,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
       ...resProps
     };
     renderDom.current = rootRef.current;
-    const beforeBridgeRenderRes = ((_c = (_b2 = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b2.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
+    const beforeBridgeRenderRes = ((_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
     renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
     providerInfoRef.current.render(renderProps);
     (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
@@ -303,40 +303,10 @@ function createRemoteComponent(info) {
   });
 }
 const isReact18 = (_a = ReactDOM.version) == null ? void 0 : _a.startsWith("18");
-const isReact19 = (_b = ReactDOM.version) == null ? void 0 : _b.startsWith("19");
-let reactDOMClientPromise = null;
-async function loadReactDOMClient() {
-  if (!isReact19) return null;
-  if (!reactDOMClientPromise) {
-    reactDOMClientPromise = import("react-dom/client");
+function createRoot(container, options) {
+  if (isReact18) {
+    return ReactDOM.createRoot(container, options);
   }
-  return reactDOMClientPromise;
-}
-function createReact19Root(container, options) {
-  loadReactDOMClient();
-  return {
-    render(children) {
-      loadReactDOMClient().then((client) => {
-        if (client && client.createRoot) {
-          const root = client.createRoot(container, options);
-          root.render(children);
-        }
-      });
-    },
-    unmount() {
-      loadReactDOMClient().then((client) => {
-        if (client && client.createRoot) {
-          const root = client.createRoot(container, options);
-          root.unmount();
-        }
-      });
-    }
-  };
-}
-function createReact18Root(container, options) {
-  return ReactDOM.createRoot(container, options);
-}
-function createReact16Or17Root(container) {
   return {
     render(children) {
       ReactDOM.render(children, container);
@@ -346,18 +316,8 @@ function createReact16Or17Root(container) {
     }
   };
 }
-function createRoot(container, options) {
-  if (isReact19) {
-    return createReact19Root(container, options);
-  }
-  if (isReact18) {
-    return createReact18Root(container, options);
-  }
-  return createReact16Or17Root(container);
-}
 function createBridgeComponent({
   createRoot: createRoot$1 = createRoot,
-  defaultRootOptions,
   ...bridgeInfo
 }) {
   return () => {
@@ -381,7 +341,7 @@ function createBridgeComponent({
     };
     return {
       async render(info) {
-        var _a2, _b2, _c, _d, _e, _f;
+        var _a2, _b, _c, _d, _e, _f;
         LoggerInstance.debug(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -389,14 +349,9 @@ function createBridgeComponent({
           basename,
           memoryRoute,
           fallback,
-          rootOptions,
           ...propsInfo
         } = info;
-        const mergedRootOptions = {
-          ...defaultRootOptions,
-          ...rootOptions
-        };
-        const beforeBridgeRenderRes = ((_c = (_b2 = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b2.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
+        const beforeBridgeRenderRes = ((_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
         const rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
           RawComponent,
           {
@@ -405,10 +360,7 @@ function createBridgeComponent({
               basename,
               memoryRoute
             },
-            propsInfo: {
-              ...propsInfo,
-              ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
-            }
+            propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
           }
         ));
         if (bridgeInfo.render) {
@@ -418,7 +370,7 @@ function createBridgeComponent({
         } else {
           let root = rootMap.get(dom);
           if (!root) {
-            root = createRoot$1(dom, mergedRootOptions);
+            root = createRoot$1(dom);
             rootMap.set(dom, root);
           }
           if ("render" in root) {
@@ -428,7 +380,7 @@ function createBridgeComponent({
         ((_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)) || {};
       },
       destroy(info) {
-        var _a2, _b2, _c;
+        var _a2, _b, _c;
         const { dom } = info;
         LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(dom);
@@ -440,7 +392,7 @@ function createBridgeComponent({
           }
           rootMap.delete(dom);
         }
-        (_c = (_b2 = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b2.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
+        (_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
       }
     };
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250408024819",
+  "version": "0.0.0-next-20250408084324",
   "publishConfig": {
     "access": "public"
   },
@@ -45,8 +45,8 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.0.0-next-20250408024819",
-    "@module-federation/sdk": "0.0.0-next-20250408024819"
+    "@module-federation/bridge-shared": "0.0.0-next-20250408084324",
+    "@module-federation/sdk": "0.0.0-next-20250408084324"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -67,7 +67,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.4.12",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.0.0-next-20250408024819"
+    "@module-federation/runtime": "0.0.0-next-20250408084324"
   },
   "scripts": {
     "dev": "vite",

package/src/provider/compat.ts

@@ -1,192 +1,60 @@
 import ReactDOM from 'react-dom';
+import { CreateRootOptions, Root } from '../types';
 
-export interface CreateRootOptions {
-  identifierPrefix?: string;
-  onRecoverableError?: (error: unknown) => void;
-  transitionCallbacks?: unknown;
-}
-
-interface Root {
-  render(children: React.ReactNode): void;
-  unmount(): void;
-}
-
-// Check React version
+// ReactDOM.version is only available in React 16.13.0 and later
 const isReact18 = ReactDOM.version?.startsWith('18');
-const isReact19 = ReactDOM.version?.startsWith('19');
-
-// Store the promise for async loaded ReactDOMClient
-let reactDOMClientPromise: Promise<any> | null = null;
-
-/**
- * Asynchronously load the react-dom/client module
- * Only attempts to load in React 19 environment
- */
-async function loadReactDOMClient() {
-  if (!isReact19) return null;
-
-  if (!reactDOMClientPromise) {
-    reactDOMClientPromise = import('react-dom/client');
-  }
-
-  return reactDOMClientPromise;
-}
-
-/**
- * Creates a root for React 19 using dynamic import of react-dom/client
- */
-function createReact19Root(
-  container: Element | DocumentFragment,
-  options?: CreateRootOptions,
-): Root {
-  // Preload react-dom/client module
-  loadReactDOMClient();
-
-  // Return a simple Root object
-  return {
-    render(children: React.ReactNode) {
-      // Try to load client again when render is called
-      loadReactDOMClient().then((client) => {
-        if (client && client.createRoot) {
-          const root = client.createRoot(container, options);
-          root.render(children);
-        }
-      });
-    },
-    unmount() {
-      // Try to load client again when unmount is called
-      loadReactDOMClient().then((client) => {
-        if (client && client.createRoot) {
-          const root = client.createRoot(container, options);
-          root.unmount();
-        }
-      });
-    },
-  };
-}
-
-/**
- * Creates a root for React 18 using ReactDOM.createRoot
- */
-function createReact18Root(
-  container: Element | DocumentFragment,
-  options?: CreateRootOptions,
-): Root {
-  // @ts-ignore - Types will be available in React 18
-  return (ReactDOM as any).createRoot(container, options);
-}
-
-/**
- * Creates a root for React 16/17 using legacy APIs
- */
-function createReact16Or17Root(container: Element | DocumentFragment): Root {
-  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);
-    },
-  };
-}
 
 /**
- * Creates a root for a container element compatible with React 16, 18, and 19
+ * Creates a root for a container element compatible with both React 16 and 18
  */
 export function createRoot(
   container: Element | DocumentFragment,
   options?: CreateRootOptions,
 ): Root {
-  if (isReact19) {
-    return createReact19Root(container, options);
-  }
-
   if (isReact18) {
-    return createReact18Root(container, options);
+    // 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
-  return createReact16Or17Root(container);
-}
-
-/**
- * Creates a hydration root for React 19 using dynamic import of react-dom/client
- */
-function hydrateReact19Root(
-  container: Element | DocumentFragment,
-  initialChildren: React.ReactNode,
-  options?: CreateRootOptions,
-): Root {
-  // Preload react-dom/client module
-  loadReactDOMClient();
-
-  // Return a simple Root object
+  // For React 16/17, simulate the new root API using render/unmountComponentAtNode
   return {
     render(children: React.ReactNode) {
-      // Try to load client again when render is called
-      loadReactDOMClient().then((client) => {
-        if (client && client.hydrateRoot) {
-          const root = client.hydrateRoot(container, initialChildren, options);
-          root.render(children);
-        }
-      });
+      ReactDOM.render(children, container);
     },
     unmount() {
-      // Try to load client again when unmount is called
-      loadReactDOMClient().then((client) => {
-        if (client && client.hydrateRoot) {
-          const root = client.hydrateRoot(container, initialChildren, options);
-          root.unmount();
-        }
-      });
+      ReactDOM.unmountComponentAtNode(container);
     },
   };
 }
 
 /**
- * Creates a hydration root for React 18 using ReactDOM.hydrateRoot
+ * Hydrates a container compatible with both React 16 and 18
  */
-function hydrateReact18Root(
+export function hydrateRoot(
   container: Element | DocumentFragment,
   initialChildren: React.ReactNode,
   options?: CreateRootOptions,
 ): Root {
-  // @ts-ignore - Types will be available in React 18
-  return (ReactDOM as any).hydrateRoot(container, initialChildren, options);
-}
+  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);
+  }
 
-/**
- * Creates a hydration root for React 16/17 using legacy APIs
- */
-function hydrateReact16Or17Root(container: Element | DocumentFragment): Root {
+  // For React 16/17, simulate the new root API using hydrate/unmountComponentAtNode
   return {
     render(children: React.ReactNode) {
-      // @ts-ignore - React 17's hydrate method is deprecated but still functional
-      ReactDOM.hydrate(children, container);
+      // For the initial render, use hydrate
+      if (children === initialChildren) {
+        ReactDOM.hydrate(children, container);
+      } else {
+        // For subsequent renders, use regular render
+        ReactDOM.render(children, container);
+      }
     },
     unmount() {
       ReactDOM.unmountComponentAtNode(container);
     },
   };
 }
-
-/**
- * Hydrates a container compatible with React 16, 18, and 19
- */
-export function hydrateRoot(
-  container: Element | DocumentFragment,
-  initialChildren: React.ReactNode,
-  options?: CreateRootOptions,
-): Root {
-  if (isReact19) {
-    return hydrateReact19Root(container, initialChildren, options);
-  }
-
-  if (isReact18) {
-    return hydrateReact18Root(container, initialChildren, options);
-  }
-
-  // For React 16/17
-  return hydrateReact16Or17Root(container);
-}

package/src/provider/create.tsx

@@ -6,7 +6,6 @@ import type {
   RootType,
   DestroyParams,
   RenderParams,
-  CreateRootOptions,
 } from '../types';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RouterContext } from './context';
@@ -16,7 +15,6 @@ import { createRoot as defaultCreateRoot } from './compat';
 
 export function createBridgeComponent<T>({
   createRoot = defaultCreateRoot,
-  defaultRootOptions,
   ...bridgeInfo
 }: ProviderFnParams<T>) {
   return () => {
@@ -50,16 +48,9 @@ export function createBridgeComponent<T>({
           basename,
           memoryRoute,
           fallback,
-          rootOptions,
           ...propsInfo
         } = info;
 
-        // Merge default root options with render-specific root options
-        const mergedRootOptions: CreateRootOptions | undefined = {
-          ...defaultRootOptions,
-          ...(rootOptions as CreateRootOptions),
-        };
-
         const beforeBridgeRenderRes =
           instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
 
@@ -72,10 +63,7 @@ export function createBridgeComponent<T>({
                 memoryRoute,
               }}
               propsInfo={
-                {
-                  ...propsInfo,
-                  ...(beforeBridgeRenderRes as any)?.extraProps,
-                } as T
+                { ...propsInfo, ...beforeBridgeRenderRes?.extraProps } as T
               }
             />
           </ErrorBoundary>
@@ -89,7 +77,7 @@ export function createBridgeComponent<T>({
           let root = rootMap.get(dom);
           // do not call createRoot multiple times
           if (!root) {
-            root = createRoot(dom, mergedRootOptions);
+            root = createRoot(dom);
             rootMap.set(dom, root);
           }
 
@@ -97,6 +85,7 @@ export function createBridgeComponent<T>({
             root.render(rootComponentWithErrorBoundary);
           }
         }
+
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
 

package/src/types.ts

@@ -34,15 +34,6 @@ export interface RenderParams {
     initialState?: Record<string, unknown>;
   };
   dom: HTMLElement;
-  /**
-   * Options to pass to createRoot for React 18 and 19
-   * @example
-   * {
-   *   identifierPrefix: 'app-',
-   *   onRecoverableError: (err) => console.error(err)
-   * }
-   */
-  rootOptions?: CreateRootOptions;
   [key: string]: unknown;
 }
 
@@ -90,16 +81,6 @@ export interface ProviderFnParams<T> {
     container: Element | DocumentFragment,
     options?: CreateRootOptions,
   ) => Root;
-  /**
-   * Default options to pass to createRoot for React 18 and 19
-   * These options will be used when creating a root unless overridden by rootOptions in render params
-   * @example
-   * {
-   *   identifierPrefix: 'app-',
-   *   onRecoverableError: (err) => console.error(err)
-   * }
-   */
-  defaultRootOptions?: CreateRootOptions;
 }
 
 /**