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

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20250407024707
+## 0.0.0-next-20250408024819
 
 ### Patch Changes
 
-- Updated dependencies [695aced]
-  - @module-federation/sdk@0.0.0-next-20250407024707
-  - @module-federation/bridge-shared@0.0.0-next-20250407024707
+- chore: bump next
+  - @module-federation/sdk@0.0.0-next-20250408024819
+  - @module-federation/bridge-shared@0.0.0-next-20250408024819
+
+## 0.12.0
+
+### Minor Changes
+
+- 8b3f9d0: feat(react-bridge): Add native support for React 19 in bridge-react with enhanced createRoot options
+
+### 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
 
 ## 0.11.3
 

package/dist/index.cjs.js

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

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, ...bridgeInfo }: ProviderFnParams<T>): () => {
+export declare function createBridgeComponent<T>({ createRoot, defaultRootOptions, ...bridgeInfo }: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
     destroy(info: DestroyParams): void;
 };
@@ -34,6 +34,16 @@ 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;
 }
 
 /**
@@ -97,6 +107,15 @@ 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;
+var _a, _b;
 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, _b, _c, _d, _e, _f, _g, _h;
+      var _a2, _b2, _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 = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+        (_d = (_c = (_b2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b2.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, _b, _c, _d, _e, _f;
+    var _a2, _b2, _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 = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
+    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)) || {};
     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,10 +303,40 @@ function createRemoteComponent(info) {
   });
 }
 const isReact18 = (_a = ReactDOM.version) == null ? void 0 : _a.startsWith("18");
-function createRoot(container, options) {
-  if (isReact18) {
-    return ReactDOM.createRoot(container, options);
+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");
   }
+  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);
@@ -316,8 +346,18 @@ function createRoot(container, options) {
     }
   };
 }
+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 () => {
@@ -341,7 +381,7 @@ function createBridgeComponent({
     };
     return {
       async render(info) {
-        var _a2, _b, _c, _d, _e, _f;
+        var _a2, _b2, _c, _d, _e, _f;
         LoggerInstance.debug(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -349,9 +389,14 @@ function createBridgeComponent({
           basename,
           memoryRoute,
           fallback,
+          rootOptions,
           ...propsInfo
         } = 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 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 rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
           RawComponent,
           {
@@ -360,7 +405,10 @@ function createBridgeComponent({
               basename,
               memoryRoute
             },
-            propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
+            propsInfo: {
+              ...propsInfo,
+              ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
+            }
           }
         ));
         if (bridgeInfo.render) {
@@ -370,7 +418,7 @@ function createBridgeComponent({
         } else {
           let root = rootMap.get(dom);
           if (!root) {
-            root = createRoot$1(dom);
+            root = createRoot$1(dom, mergedRootOptions);
             rootMap.set(dom, root);
           }
           if ("render" in root) {
@@ -380,7 +428,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, _b, _c;
+        var _a2, _b2, _c;
         const { dom } = info;
         LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(dom);
@@ -392,7 +440,7 @@ function createBridgeComponent({
           }
           rootMap.delete(dom);
         }
-        (_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);
+        (_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);
       }
     };
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250407024707",
+  "version": "0.0.0-next-20250408024819",
   "publishConfig": {
     "access": "public"
   },
@@ -45,8 +45,8 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.0.0-next-20250407024707",
-    "@module-federation/sdk": "0.0.0-next-20250407024707"
+    "@module-federation/bridge-shared": "0.0.0-next-20250408024819",
+    "@module-federation/sdk": "0.0.0-next-20250408024819"
   },
   "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-20250407024707"
+    "@module-federation/runtime": "0.0.0-next-20250408024819"
   },
   "scripts": {
     "dev": "vite",

package/src/provider/compat.ts

@@ -1,25 +1,88 @@
 import ReactDOM from 'react-dom';
-import { CreateRootOptions, Root } from '../types';
 
-// ReactDOM.version is only available in React 16.13.0 and later
+export interface CreateRootOptions {
+  identifierPrefix?: string;
+  onRecoverableError?: (error: unknown) => void;
+  transitionCallbacks?: unknown;
+}
+
+interface Root {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+// Check React version
 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;
 
 /**
- * Creates a root for a container element compatible with both React 16 and 18
+ * Asynchronously load the react-dom/client module
+ * Only attempts to load in React 19 environment
  */
-export function createRoot(
+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 {
-  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);
-  }
+  // Preload react-dom/client module
+  loadReactDOMClient();
 
-  // For React 16/17, simulate the new root API using render/unmountComponentAtNode
+  // 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() {
@@ -29,32 +92,101 @@ export function createRoot(
 }
 
 /**
- * Hydrates a container compatible with both React 16 and 18
+ * Creates a root for a container element compatible with React 16, 18, and 19
  */
-export function hydrateRoot(
+export function createRoot(
   container: Element | DocumentFragment,
-  initialChildren: React.ReactNode,
   options?: CreateRootOptions,
 ): Root {
+  if (isReact19) {
+    return createReact19Root(container, 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);
+    return createReact18Root(container, options);
   }
 
-  // For React 16/17, simulate the new root API using hydrate/unmountComponentAtNode
+  // 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
   return {
     render(children: React.ReactNode) {
-      // For the initial render, use hydrate
-      if (children === initialChildren) {
-        ReactDOM.hydrate(children, container);
-      } else {
-        // For subsequent renders, use regular render
-        ReactDOM.render(children, container);
-      }
+      // 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);
+        }
+      });
+    },
+    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();
+        }
+      });
+    },
+  };
+}
+
+/**
+ * Creates a hydration root for React 18 using ReactDOM.hydrateRoot
+ */
+function hydrateReact18Root(
+  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);
+}
+
+/**
+ * Creates a hydration root for React 16/17 using legacy APIs
+ */
+function hydrateReact16Or17Root(container: Element | DocumentFragment): Root {
+  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);
     },
   };
 }
+
+/**
+ * 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,6 +6,7 @@ import type {
   RootType,
   DestroyParams,
   RenderParams,
+  CreateRootOptions,
 } from '../types';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RouterContext } from './context';
@@ -15,6 +16,7 @@ import { createRoot as defaultCreateRoot } from './compat';
 
 export function createBridgeComponent<T>({
   createRoot = defaultCreateRoot,
+  defaultRootOptions,
   ...bridgeInfo
 }: ProviderFnParams<T>) {
   return () => {
@@ -48,9 +50,16 @@ 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) || {};
 
@@ -63,7 +72,10 @@ export function createBridgeComponent<T>({
                 memoryRoute,
               }}
               propsInfo={
-                { ...propsInfo, ...beforeBridgeRenderRes?.extraProps } as T
+                {
+                  ...propsInfo,
+                  ...(beforeBridgeRenderRes as any)?.extraProps,
+                } as T
               }
             />
           </ErrorBoundary>
@@ -77,7 +89,7 @@ export function createBridgeComponent<T>({
           let root = rootMap.get(dom);
           // do not call createRoot multiple times
           if (!root) {
-            root = createRoot(dom);
+            root = createRoot(dom, mergedRootOptions);
             rootMap.set(dom, root);
           }
 
@@ -85,7 +97,6 @@ export function createBridgeComponent<T>({
             root.render(rootComponentWithErrorBoundary);
           }
         }
-
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
 

package/src/types.ts

@@ -34,6 +34,15 @@ 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;
 }
 
@@ -81,6 +90,16 @@ 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;
 }
 
 /**