@module-federation/bridge-react 0.0.0-next-20240619092117 → 0.0.0-next-20240620023927

package/CHANGELOG.md

@@ -1,7 +1,7 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240619092117
+## 0.0.0-next-20240620023927
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240619092117
+- @module-federation/bridge-shared@0.0.0-next-20240620023927

package/__tests__/bridge.spec.tsx

@@ -63,6 +63,7 @@ describe('bridge', () => {
     expect(getHtml(container)).toMatch('loading');
 
     await sleep(200);
-    expect(getHtml(container)).toMatch('life cycle render hello world');
+    expect(getHtml(container)).toMatch('life cycle render');
+    expect(getHtml(container)).toMatch('hello world');
   });
 });

package/dist/{context-CoFgcMIF.js → context-CPtN38Ur.js}

@@ -1,4 +1,4 @@
-import React from "react";
+import React__default from "react";
 var a = Object.defineProperty;
 var c = (s, e, t) => e in s ? a(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
 var i = (s, e, t) => (c(s, typeof e != "symbol" ? e + "" : e, t), t);
@@ -35,9 +35,22 @@ function f() {
   window.dispatchEvent(s);
 }
 const LoggerInstance = new g("bridge-react");
-const RouterContext = React.createContext(null);
+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;
+  }
+}
+const RouterContext = React__default.createContext(null);
 export {
   LoggerInstance as L,
   RouterContext as R,
+  atLeastReact18 as a,
   f
 };

package/dist/{context-C7FfFcIe.cjs → context-ePt4wynZ.cjs}

@@ -36,7 +36,20 @@ function f() {
   window.dispatchEvent(s);
 }
 const LoggerInstance = new g("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;
+  }
+}
 const RouterContext = React.createContext(null);
 exports.LoggerInstance = LoggerInstance;
 exports.RouterContext = RouterContext;
+exports.atLeastReact18 = atLeastReact18;
 exports.f = f;

package/dist/index.cjs.js

@@ -2,30 +2,50 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const reactRouterDom = require("react-router-dom");
-const context = require("./context-C7FfFcIe.cjs");
-const require$$0 = require("react-dom");
+const context = require("./context-ePt4wynZ.cjs");
+const ReactDOM = require("react-dom");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const RemoteApp = ({
   name,
   memoryRoute,
   basename,
   providerInfo,
+  dispathPopstate,
   ...resProps
 }) => {
   const rootRef = React.useRef(null);
   const renderDom = React.useRef(null);
-  const location = reactRouterDom.useLocation();
-  const [pathname, setPathname] = React.useState(location.pathname);
   const providerInfoRef = React.useRef(null);
-  React.useEffect(() => {
-    if (pathname !== "" && pathname !== location.pathname) {
-      context.LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-        name,
-        pathname: location.pathname
-      });
-      context.f();
-    }
-    setPathname(location.pathname);
-  }, [location]);
+  if (dispathPopstate) {
+    const location = reactRouterDom.useLocation();
+    const [pathname, setPathname] = React.useState(location.pathname);
+    React.useEffect(() => {
+      if (pathname !== "" && pathname !== location.pathname) {
+        context.LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+          name,
+          pathname: location.pathname
+        });
+        context.f();
+      }
+      setPathname(location.pathname);
+    }, [location]);
+  }
   React.useEffect(() => {
     const renderTimeout = setTimeout(() => {
       const providerReturn = providerInfo();
@@ -68,7 +88,7 @@ function createRemoteComponent(lazyComponent, info) {
     const exportName = (info == null ? void 0 : info.export) || "default";
     const routerContextVal = React.useContext(reactRouterDom.UNSAFE_RouteContext);
     let basename = "/";
-    if (routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
+    if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
       basename = routerContextVal.matches[0].pathnameBase;
     }
     const LazyComponent = React.useMemo(() => {
@@ -77,7 +97,8 @@ function createRemoteComponent(lazyComponent, info) {
           basename,
           lazyComponent,
           exportName,
-          props
+          props,
+          routerContextVal
         });
         const m2 = await lazyComponent();
         const moduleName = m2 && m2[Symbol.for("mf_module_id")];
@@ -92,6 +113,7 @@ function createRemoteComponent(lazyComponent, info) {
               RemoteApp,
               {
                 name: moduleName,
+                dispathPopstate: (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0,
                 ...info,
                 ...props,
                 providerInfo: exportFn,
@@ -107,7 +129,7 @@ function createRemoteComponent(lazyComponent, info) {
   };
 }
 var client = {};
-var m = require$$0;
+var m = ReactDOM;
 if (process.env.NODE_ENV === "production") {
   client.createRoot = m.createRoot;
   client.hydrateRoot = m.hydrateRoot;
@@ -136,34 +158,55 @@ function createBridgeComponent(bridgeInfo) {
     const RawComponent = (info) => {
       const { appInfo, propsInfo } = info;
       const { name, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
+      return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
     };
     return {
       render(info) {
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
-        const root = client.createRoot(info.dom);
-        rootMap.set(info.dom, root);
         const { name, basename, memoryRoute, ...propsInfo } = info;
-        root.render(
-          /* @__PURE__ */ React.createElement(
-            RawComponent,
-            {
-              propsInfo,
-              appInfo: {
-                name,
-                basename,
-                memoryRoute
+        if (context.atLeastReact18(React__namespace)) {
+          const root = client.createRoot(info.dom);
+          rootMap.set(info.dom, root);
+          root.render(
+            /* @__PURE__ */ React__namespace.createElement(
+              RawComponent,
+              {
+                propsInfo,
+                appInfo: {
+                  name,
+                  basename,
+                  memoryRoute
+                }
               }
-            }
-          )
-        );
+            )
+          );
+        } else {
+          ReactDOM.render(
+            /* @__PURE__ */ React__namespace.createElement(
+              RawComponent,
+              {
+                propsInfo,
+                appInfo: {
+                  name,
+                  basename,
+                  memoryRoute
+                }
+              }
+            ),
+            info.dom
+          );
+        }
       },
       destroy(info) {
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
-        const root = rootMap.get(info.dom);
-        root == null ? void 0 : root.unmount();
+        if (context.atLeastReact18(React__namespace)) {
+          const root = rootMap.get(info.dom);
+          root == null ? void 0 : root.unmount();
+        } else {
+          ReactDOM.unmountComponentAtNode(info.dom);
+        }
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args) => {

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { default as default_2 } from 'react';
+import * as React_2 from 'react';
 import { ReactNode } from 'react';
 
 export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
@@ -6,7 +7,7 @@ export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>
     destroy(info: {
         dom: HTMLElement;
     }): void;
-    rawComponent: default_2.ComponentType<T>;
+    rawComponent: React_2.ComponentType<T>;
     __BRIDGE_FN__: (_args: T) => void;
 };
 
@@ -19,7 +20,7 @@ export declare function createRemoteComponent<T, E extends keyof T>(lazyComponen
 } & ("__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.JSX.Element;
 
 declare type ProviderFnParams<T> = {
-    rootComponent: default_2.ComponentType<T>;
+    rootComponent: React_2.ComponentType<T>;
 };
 
 export declare interface ProviderParams {

package/dist/index.es.js

@@ -1,29 +1,33 @@
-import React, { useContext, useMemo, useRef, useState, useEffect } from "react";
+import * as React from "react";
+import React__default, { useContext, useMemo, useRef, useState, useEffect } from "react";
 import { UNSAFE_RouteContext, useLocation } from "react-router-dom";
-import { L as LoggerInstance, f, R as RouterContext } from "./context-CoFgcMIF.js";
-import require$$0 from "react-dom";
+import { L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-CPtN38Ur.js";
+import ReactDOM from "react-dom";
 const RemoteApp = ({
   name,
   memoryRoute,
   basename,
   providerInfo,
+  dispathPopstate,
   ...resProps
 }) => {
   const rootRef = useRef(null);
   const renderDom = useRef(null);
-  const location = useLocation();
-  const [pathname, setPathname] = useState(location.pathname);
   const providerInfoRef = useRef(null);
-  useEffect(() => {
-    if (pathname !== "" && pathname !== location.pathname) {
-      LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-        name,
-        pathname: location.pathname
-      });
-      f();
-    }
-    setPathname(location.pathname);
-  }, [location]);
+  if (dispathPopstate) {
+    const location = useLocation();
+    const [pathname, setPathname] = useState(location.pathname);
+    useEffect(() => {
+      if (pathname !== "" && pathname !== location.pathname) {
+        LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+          name,
+          pathname: location.pathname
+        });
+        f();
+      }
+      setPathname(location.pathname);
+    }, [location]);
+  }
   useEffect(() => {
     const renderTimeout = setTimeout(() => {
       const providerReturn = providerInfo();
@@ -58,7 +62,7 @@ const RemoteApp = ({
       });
     };
   }, []);
-  return /* @__PURE__ */ React.createElement("div", { ref: rootRef });
+  return /* @__PURE__ */ React__default.createElement("div", { ref: rootRef });
 };
 RemoteApp["__APP_VERSION__"] = "0.0.1";
 function createRemoteComponent(lazyComponent, info) {
@@ -66,16 +70,17 @@ function createRemoteComponent(lazyComponent, info) {
     const exportName = (info == null ? void 0 : info.export) || "default";
     const routerContextVal = useContext(UNSAFE_RouteContext);
     let basename = "/";
-    if (routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
+    if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
       basename = routerContextVal.matches[0].pathnameBase;
     }
     const LazyComponent = useMemo(() => {
-      return React.lazy(async () => {
+      return React__default.lazy(async () => {
         LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
           basename,
           lazyComponent,
           exportName,
-          props
+          props,
+          routerContextVal
         });
         const m2 = await lazyComponent();
         const moduleName = m2 && m2[Symbol.for("mf_module_id")];
@@ -86,10 +91,11 @@ function createRemoteComponent(lazyComponent, info) {
         const exportFn = m2[exportName];
         if (exportName in m2 && typeof exportFn === "function") {
           return {
-            default: () => /* @__PURE__ */ React.createElement(
+            default: () => /* @__PURE__ */ React__default.createElement(
               RemoteApp,
               {
                 name: moduleName,
+                dispathPopstate: (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0,
                 ...info,
                 ...props,
                 providerInfo: exportFn,
@@ -101,11 +107,11 @@ function createRemoteComponent(lazyComponent, info) {
         throw Error("module not found");
       });
     }, [exportName, basename, props.memoryRoute]);
-    return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: props.fallback }, /* @__PURE__ */ React.createElement(LazyComponent, null));
+    return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: props.fallback }, /* @__PURE__ */ React__default.createElement(LazyComponent, null));
   };
 }
 var client = {};
-var m = require$$0;
+var m = ReactDOM;
 if (process.env.NODE_ENV === "production") {
   client.createRoot = m.createRoot;
   client.hydrateRoot = m.hydrateRoot;
@@ -139,29 +145,50 @@ function createBridgeComponent(bridgeInfo) {
     return {
       render(info) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
-        const root = client.createRoot(info.dom);
-        rootMap.set(info.dom, root);
         const { name, basename, memoryRoute, ...propsInfo } = info;
-        root.render(
-          /* @__PURE__ */ React.createElement(
-            RawComponent,
-            {
-              propsInfo,
-              appInfo: {
-                name,
-                basename,
-                memoryRoute
+        if (atLeastReact18(React)) {
+          const root = client.createRoot(info.dom);
+          rootMap.set(info.dom, root);
+          root.render(
+            /* @__PURE__ */ React.createElement(
+              RawComponent,
+              {
+                propsInfo,
+                appInfo: {
+                  name,
+                  basename,
+                  memoryRoute
+                }
               }
-            }
-          )
-        );
+            )
+          );
+        } else {
+          ReactDOM.render(
+            /* @__PURE__ */ React.createElement(
+              RawComponent,
+              {
+                propsInfo,
+                appInfo: {
+                  name,
+                  basename,
+                  memoryRoute
+                }
+              }
+            ),
+            info.dom
+          );
+        }
       },
       destroy(info) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
-        const root = rootMap.get(info.dom);
-        root == null ? void 0 : root.unmount();
+        if (atLeastReact18(React)) {
+          const root = rootMap.get(info.dom);
+          root == null ? void 0 : root.unmount();
+        } else {
+          ReactDOM.unmountComponentAtNode(info.dom);
+        }
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args) => {

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-C7FfFcIe.cjs");
+const context = require("./context-ePt4wynZ.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, { useContext } from "react";
+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-CoFgcMIF.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-CPtN38Ur.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};
@@ -11,9 +11,9 @@ function WraperRouter(props) {
     WraperRouterProps: props
   });
   if (!routerContextProps)
-    return /* @__PURE__ */ React.createElement(ReactRouterDom.BrowserRouter, { ...props });
+    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.BrowserRouter, { ...props });
   if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       ReactRouterDom.MemoryRouter,
       {
         ...props,
@@ -21,7 +21,7 @@ function WraperRouter(props) {
       }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     ReactRouterDom.BrowserRouter,
     {
       ...propsRes,
@@ -40,19 +40,19 @@ function WraperRouterProvider(props) {
     router
   });
   if (!routerContextProps)
-    return /* @__PURE__ */ React.createElement(ReactRouterDom.RouterProvider, { ...props });
+    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.RouterProvider, { ...props });
   if (routerContextProps.memoryRoute) {
     const MemeoryRouterInstance = ReactRouterDom.createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
     });
-    return /* @__PURE__ */ React.createElement(ReactRouterDom.RouterProvider, { router: MemeoryRouterInstance });
+    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.RouterProvider, { router: MemeoryRouterInstance });
   } else {
     const BrowserRouterInstance = ReactRouterDom.createBrowserRouter(routers, {
       basename: routerContextProps.basename,
       future: router.future,
       window: router.window
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       ReactRouterDom.RouterProvider,
       {
         ...propsRes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240619092117",
+  "version": "0.0.0-next-20240620023927",
   "publishConfig": {
     "access": "public"
   },
@@ -25,12 +25,12 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20240619092117"
+    "@module-federation/bridge-shared": "0.0.0-next-20240620023927"
   },
   "peerDependencies": {
-    "react": "=18",
-    "react-dom": "=18",
-    "react-router-dom": ">=5"
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0",
+    "react-router-dom": ">=4"
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",

package/src/create.tsx

@@ -31,6 +31,7 @@ interface RemoteModule {
 interface RemoteAppParams {
   name: string;
   providerInfo: NonNullable<RemoteModule['provider']>;
+  dispathPopstate: boolean;
 }
 
 const RemoteApp = ({
@@ -38,24 +39,27 @@ const RemoteApp = ({
   memoryRoute,
   basename,
   providerInfo,
+  dispathPopstate,
   ...resProps
 }: RemoteAppParams & ProviderParams) => {
   const rootRef = useRef(null);
   const renderDom = useRef(null);
-  const location = useLocation();
-  const [pathname, setPathname] = useState(location.pathname);
   const providerInfoRef = useRef<any>(null);
-
-  useEffect(() => {
-    if (pathname !== '' && pathname !== location.pathname) {
-      LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-        name,
-        pathname: location.pathname,
-      });
-      dispatchPopstateEnv();
-    }
-    setPathname(location.pathname);
-  }, [location]);
+  if (dispathPopstate) {
+    const location = useLocation();
+    const [pathname, setPathname] = useState(location.pathname);
+
+    useEffect(() => {
+      if (pathname !== '' && pathname !== location.pathname) {
+        LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+          name,
+          pathname: location.pathname,
+        });
+        dispatchPopstateEnv();
+      }
+      setPathname(location.pathname);
+    }, [location]);
+  }
 
   useEffect(() => {
     const renderTimeout = setTimeout(() => {
@@ -124,6 +128,8 @@ export function createRemoteComponent<T, E extends keyof T>(
     const routerContextVal = useContext(UNSAFE_RouteContext);
     let basename = '/';
     if (
+      routerContextVal &&
+      routerContextVal.matches &&
       routerContextVal.matches[0] &&
       routerContextVal.matches[0].pathnameBase
     ) {
@@ -138,6 +144,7 @@ export function createRemoteComponent<T, E extends keyof T>(
           lazyComponent,
           exportName,
           props,
+          routerContextVal,
         });
         const m = (await lazyComponent()) as RemoteModule;
         // @ts-ignore
@@ -155,6 +162,10 @@ export function createRemoteComponent<T, E extends keyof T>(
             default: () => (
               <RemoteApp
                 name={moduleName}
+                dispathPopstate={
+                  routerContextVal?.matches &&
+                  routerContextVal?.matches.length > 0
+                }
                 {...info}
                 {...props}
                 providerInfo={exportFn}

package/src/provider.tsx

@@ -1,11 +1,13 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom/client';
+import { useLayoutEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
 import { RouterContext } from './context';
 import type {
   ProviderParams,
   RenderFnParams,
 } from '@module-federation/bridge-shared';
-import { LoggerInstance } from './utils';
+import { LoggerInstance, atLeastReact18 } from './utils';
 
 type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
@@ -13,7 +15,7 @@ type ProviderFnParams<T> = {
 
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
   return () => {
-    const rootMap = new Map<any, ReactDOM.Root>();
+    const rootMap = new Map<any, ReactDOMClient.Root>();
 
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
       const { appInfo, propsInfo } = info;
@@ -29,26 +31,45 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
     return {
       render(info: RenderFnParams & any) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
-        const root = ReactDOM.createRoot(info.dom);
-        rootMap.set(info.dom, root);
         const { name, basename, memoryRoute, ...propsInfo } = info;
-        root.render(
-          <RawComponent
-            propsInfo={propsInfo}
-            appInfo={{
-              name,
-              basename,
-              memoryRoute,
-            }}
-          />,
-        );
+
+        if (atLeastReact18(React)) {
+          const root = ReactDOMClient.createRoot(info.dom);
+          rootMap.set(info.dom, root);
+          root.render(
+            <RawComponent
+              propsInfo={propsInfo}
+              appInfo={{
+                name,
+                basename,
+                memoryRoute,
+              }}
+            />,
+          );
+        } else {
+          ReactDOM.render(
+            <RawComponent
+              propsInfo={propsInfo}
+              appInfo={{
+                name,
+                basename,
+                memoryRoute,
+              }}
+            />,
+            info.dom,
+          );
+        }
       },
       destroy(info: { dom: HTMLElement }) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
-        const root = rootMap.get(info.dom);
-        root?.unmount();
+        if (atLeastReact18(React)) {
+          const root = rootMap.get(info.dom);
+          root?.unmount();
+        } else {
+          ReactDOM.unmountComponentAtNode(info.dom);
+        }
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args: T) => {},

package/src/utils.ts

@@ -1,3 +1,23 @@
+import React from 'react';
 import { Logger } from '@module-federation/bridge-shared';
 
 export const LoggerInstance = new Logger('bridge-react');
+
+type typeReact = typeof React;
+
+export function atLeastReact18(React: typeReact) {
+  if (
+    React &&
+    typeof React.version === 'string' &&
+    React.version.indexOf('.') >= 0
+  ) {
+    const majorVersionString = React.version.split('.')[0];
+    try {
+      return Number(majorVersionString) >= 18;
+    } catch (err) {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}