@module-federation/bridge-react 0.0.0-next-20240704021704 → 0.0.0-next-20240707072703

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240704021704
+## 0.0.0-next-20240707072703
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240704021704
+- @module-federation/bridge-shared@0.0.0-next-20240707072703
 
 ## 0.2.3
 

package/dist/index.cjs.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const context = require("./context--mtFt3tp.cjs");
 const ReactRouterDOM = require("react-router-dom");
+const context = require("./context--mtFt3tp.cjs");
 const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -122,11 +122,26 @@ const RemoteApp = ({
   memoryRoute,
   basename,
   providerInfo,
+  dispathPopstate,
   ...resProps
 }) => {
   const rootRef = React.useRef(null);
   const renderDom = React.useRef(null);
   const providerInfoRef = React.useRef(null);
+  if (dispathPopstate) {
+    const location = ReactRouterDOM__namespace.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();
@@ -164,9 +179,11 @@ const RemoteApp = ({
   return /* @__PURE__ */ React.createElement("div", { ref: rootRef });
 };
 RemoteApp["__APP_VERSION__"] = "0.2.3";
-function withRouterData(WrappedComponent) {
+function createRemoteComponent(info) {
   return (props) => {
     var _a;
+    const exportName = (info == null ? void 0 : info.export) || "default";
+    let basename = "/";
     let enableDispathPopstate = false;
     let routerContextVal;
     try {
@@ -175,8 +192,9 @@ function withRouterData(WrappedComponent) {
     } catch {
       enableDispathPopstate = false;
     }
-    let basename = "/";
-    if (!props.basename && enableDispathPopstate) {
+    if (props.basename) {
+      basename = props.basename;
+    } else if (enableDispathPopstate) {
       const ReactRouterDOMAny = ReactRouterDOM__namespace;
       const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
       const useHistory = ReactRouterDOMAny["useHistory"];
@@ -187,10 +205,11 @@ function withRouterData(WrappedComponent) {
           basename = useHref == null ? void 0 : useHref("/");
         }
         routerContextVal = React.useContext(UNSAFE_RouteContext);
-        if (routerContextVal && routerContextVal.matches && routerContextVal.matches.length > 0) {
-          const matchIndex = routerContextVal.matches.length - 1;
-          const pathnameBase = routerContextVal.matches[matchIndex].pathnameBase;
-          basename = context.pathJoin(basename, pathnameBase || "/");
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
+          basename = context.pathJoin(
+            basename,
+            routerContextVal.matches[0].pathnameBase || "/"
+          );
         }
       } else {
         const match = useRouteMatch == null ? void 0 : useRouteMatch();
@@ -203,80 +222,54 @@ function withRouterData(WrappedComponent) {
         }
       }
     }
-    context.LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
-      ...props,
-      basename,
-      routerContextVal,
-      enableDispathPopstate
-    });
-    if (enableDispathPopstate) {
-      const location = ReactRouterDOM__namespace.useLocation();
-      const [pathname, setPathname] = React.useState(location.pathname);
-      React.useEffect(() => {
-        if (pathname !== "" && pathname !== location.pathname) {
-          context.LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-            name: props.name,
-            pathname: location.pathname
-          });
-          context.f();
-        }
-        setPathname(location.pathname);
-      }, [location]);
-    }
-    return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename });
-  };
-}
-const RemoteApp$1 = withRouterData(RemoteApp);
-function createLazyRemoteComponent(info) {
-  const exportName = (info == null ? void 0 : info.export) || "default";
-  return React.lazy(async () => {
-    context.LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
-      lazyComponent: info.loader,
-      exportName
-    });
-    try {
-      const m2 = await info.loader();
-      const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-      context.LoggerInstance.log(
-        `createRemoteComponent LazyComponent loadRemote info >>>`,
-        { name: moduleName, module: m2, exportName }
-      );
-      const exportFn = m2[exportName];
-      if (exportName in m2 && typeof exportFn === "function") {
-        const RemoteAppComponent = React.forwardRef((props, _ref) => {
-          return /* @__PURE__ */ React.createElement(
-            RemoteApp$1,
-            {
-              name: moduleName,
-              providerInfo: exportFn,
-              exportName: info.export || "default",
-              ...props
-            }
-          );
+    const LazyComponent = React.useMemo(() => {
+      return React.lazy(async () => {
+        context.LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+          basename,
+          lazyComponent: info.loader,
+          exportName,
+          props,
+          routerContextVal
         });
-        return {
-          default: RemoteAppComponent
-        };
-      } else {
-        context.LoggerInstance.log(
-          `createRemoteComponent LazyComponent module not found >>>`,
-          { name: moduleName, module: m2, exportName }
-        );
-        throw Error(
-          `Make sure that ${moduleName} has the correct export when export is ${String(
-            exportName
-          )}`
-        );
-      }
-    } catch (error) {
-      throw error;
-    }
-  });
-}
-function createRemoteComponent(info) {
-  const LazyComponent = createLazyRemoteComponent(info);
-  return (props) => {
-    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props })));
+        try {
+          const m2 = await info.loader();
+          const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+          context.LoggerInstance.log(
+            `createRemoteComponent LazyComponent loadRemote info >>>`,
+            { basename, name: moduleName, module: m2, exportName, props }
+          );
+          const exportFn = m2[exportName];
+          if (exportName in m2 && typeof exportFn === "function") {
+            return {
+              default: () => /* @__PURE__ */ React.createElement(
+                RemoteApp,
+                {
+                  name: moduleName,
+                  dispathPopstate: enableDispathPopstate,
+                  ...info,
+                  ...props,
+                  providerInfo: exportFn,
+                  basename
+                }
+              )
+            };
+          } else {
+            context.LoggerInstance.log(
+              `createRemoteComponent LazyComponent module not found >>>`,
+              { basename, name: moduleName, module: m2, exportName, props }
+            );
+            throw Error(
+              `Make sure that ${moduleName} has the correct export when export is ${String(
+                exportName
+              )}`
+            );
+          }
+        } catch (error) {
+          throw error;
+        }
+      });
+    }, [exportName, basename, props.memoryRoute]);
+    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, null)));
   };
 }
 var client = {};

package/dist/index.d.ts

@@ -19,8 +19,8 @@ export declare function createRemoteComponent<T, E extends keyof T>(info: {
     fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
     export?: E;
 }): (props: {
-    basename?: ProviderParams["basename"];
-    memoryRoute?: ProviderParams["memoryRoute"];
+    basename?: ProviderParams['basename'];
+    memoryRoute?: ProviderParams['memoryRoute'];
 } & ("__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 ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import React__default, { createContext, Component, createElement, isValidElement, useContext, useState, useEffect, useRef, forwardRef } from "react";
-import { p as pathJoin, L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
+import React__default, { createContext, Component, createElement, isValidElement, useContext, useMemo, useRef, useState, useEffect } from "react";
 import * as ReactRouterDOM from "react-router-dom";
+import { p as pathJoin, L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
 import ReactDOM from "react-dom";
 const ErrorBoundaryContext = createContext(null);
 const initialState = {
@@ -103,11 +103,26 @@ const RemoteApp = ({
   memoryRoute,
   basename,
   providerInfo,
+  dispathPopstate,
   ...resProps
 }) => {
   const rootRef = useRef(null);
   const renderDom = useRef(null);
   const providerInfoRef = useRef(null);
+  if (dispathPopstate) {
+    const location = ReactRouterDOM.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();
@@ -145,9 +160,11 @@ const RemoteApp = ({
   return /* @__PURE__ */ React__default.createElement("div", { ref: rootRef });
 };
 RemoteApp["__APP_VERSION__"] = "0.2.3";
-function withRouterData(WrappedComponent) {
+function createRemoteComponent(info) {
   return (props) => {
     var _a;
+    const exportName = (info == null ? void 0 : info.export) || "default";
+    let basename = "/";
     let enableDispathPopstate = false;
     let routerContextVal;
     try {
@@ -156,8 +173,9 @@ function withRouterData(WrappedComponent) {
     } catch {
       enableDispathPopstate = false;
     }
-    let basename = "/";
-    if (!props.basename && enableDispathPopstate) {
+    if (props.basename) {
+      basename = props.basename;
+    } else if (enableDispathPopstate) {
       const ReactRouterDOMAny = ReactRouterDOM;
       const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
       const useHistory = ReactRouterDOMAny["useHistory"];
@@ -168,10 +186,11 @@ function withRouterData(WrappedComponent) {
           basename = useHref == null ? void 0 : useHref("/");
         }
         routerContextVal = useContext(UNSAFE_RouteContext);
-        if (routerContextVal && routerContextVal.matches && routerContextVal.matches.length > 0) {
-          const matchIndex = routerContextVal.matches.length - 1;
-          const pathnameBase = routerContextVal.matches[matchIndex].pathnameBase;
-          basename = pathJoin(basename, pathnameBase || "/");
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
+          basename = pathJoin(
+            basename,
+            routerContextVal.matches[0].pathnameBase || "/"
+          );
         }
       } else {
         const match = useRouteMatch == null ? void 0 : useRouteMatch();
@@ -184,80 +203,54 @@ function withRouterData(WrappedComponent) {
         }
       }
     }
-    LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
-      ...props,
-      basename,
-      routerContextVal,
-      enableDispathPopstate
-    });
-    if (enableDispathPopstate) {
-      const location = ReactRouterDOM.useLocation();
-      const [pathname, setPathname] = useState(location.pathname);
-      useEffect(() => {
-        if (pathname !== "" && pathname !== location.pathname) {
-          LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-            name: props.name,
-            pathname: location.pathname
-          });
-          f();
-        }
-        setPathname(location.pathname);
-      }, [location]);
-    }
-    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename });
-  };
-}
-const RemoteApp$1 = withRouterData(RemoteApp);
-function createLazyRemoteComponent(info) {
-  const exportName = (info == null ? void 0 : info.export) || "default";
-  return React__default.lazy(async () => {
-    LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
-      lazyComponent: info.loader,
-      exportName
-    });
-    try {
-      const m2 = await info.loader();
-      const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-      LoggerInstance.log(
-        `createRemoteComponent LazyComponent loadRemote info >>>`,
-        { name: moduleName, module: m2, exportName }
-      );
-      const exportFn = m2[exportName];
-      if (exportName in m2 && typeof exportFn === "function") {
-        const RemoteAppComponent = forwardRef((props, _ref) => {
-          return /* @__PURE__ */ React__default.createElement(
-            RemoteApp$1,
-            {
-              name: moduleName,
-              providerInfo: exportFn,
-              exportName: info.export || "default",
-              ...props
-            }
-          );
+    const LazyComponent = useMemo(() => {
+      return React__default.lazy(async () => {
+        LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+          basename,
+          lazyComponent: info.loader,
+          exportName,
+          props,
+          routerContextVal
         });
-        return {
-          default: RemoteAppComponent
-        };
-      } else {
-        LoggerInstance.log(
-          `createRemoteComponent LazyComponent module not found >>>`,
-          { name: moduleName, module: m2, exportName }
-        );
-        throw Error(
-          `Make sure that ${moduleName} has the correct export when export is ${String(
-            exportName
-          )}`
-        );
-      }
-    } catch (error) {
-      throw error;
-    }
-  });
-}
-function createRemoteComponent(info) {
-  const LazyComponent = createLazyRemoteComponent(info);
-  return (props) => {
-    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props })));
+        try {
+          const m2 = await info.loader();
+          const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+          LoggerInstance.log(
+            `createRemoteComponent LazyComponent loadRemote info >>>`,
+            { basename, name: moduleName, module: m2, exportName, props }
+          );
+          const exportFn = m2[exportName];
+          if (exportName in m2 && typeof exportFn === "function") {
+            return {
+              default: () => /* @__PURE__ */ React__default.createElement(
+                RemoteApp,
+                {
+                  name: moduleName,
+                  dispathPopstate: enableDispathPopstate,
+                  ...info,
+                  ...props,
+                  providerInfo: exportFn,
+                  basename
+                }
+              )
+            };
+          } else {
+            LoggerInstance.log(
+              `createRemoteComponent LazyComponent module not found >>>`,
+              { basename, name: moduleName, module: m2, exportName, props }
+            );
+            throw Error(
+              `Make sure that ${moduleName} has the correct export when export is ${String(
+                exportName
+              )}`
+            );
+          }
+        } catch (error) {
+          throw error;
+        }
+      });
+    }, [exportName, basename, props.memoryRoute]);
+    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, null)));
   };
 }
 var client = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240704021704",
+  "version": "0.0.0-next-20240707072703",
   "publishConfig": {
     "access": "public"
   },
@@ -25,7 +25,7 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20240704021704"
+    "@module-federation/bridge-shared": "0.0.0-next-20240707072703"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/create.tsx

@@ -1,11 +1,14 @@
-import React, { forwardRef } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import * as ReactRouterDOM from 'react-router-dom';
 import type { ProviderParams } from '@module-federation/bridge-shared';
-import { LoggerInstance } from './utils';
+import { LoggerInstance, pathJoin } from './utils';
+import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 import {
   ErrorBoundary,
   ErrorBoundaryPropsWithComponent,
 } from 'react-error-boundary';
-import RemoteApp from './remote';
+
+declare const __APP_VERSION__: string;
 
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
@@ -22,67 +25,79 @@ interface RemoteModule {
   };
 }
 
-function createLazyRemoteComponent<T, E extends keyof T>(info: {
-  loader: () => Promise<T>;
-  loading: React.ReactNode;
-  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-  export?: E;
-}) {
-  const exportName = info?.export || 'default';
-  return React.lazy(async () => {
-    LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
-      lazyComponent: info.loader,
-      exportName,
-    });
-    try {
-      const m = (await info.loader()) as RemoteModule;
-      // @ts-ignore
-      const moduleName = m && m[Symbol.for('mf_module_id')];
+interface RemoteAppParams {
+  name: string;
+  providerInfo: NonNullable<RemoteModule['provider']>;
+  dispathPopstate: boolean;
+}
+
+const RemoteApp = ({
+  name,
+  memoryRoute,
+  basename,
+  providerInfo,
+  dispathPopstate,
+  ...resProps
+}: RemoteAppParams & ProviderParams) => {
+  const rootRef = useRef(null);
+  const renderDom = useRef(null);
+  const providerInfoRef = useRef<any>(null);
+  if (dispathPopstate) {
+    const location = ReactRouterDOM.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(() => {
+      const providerReturn = providerInfo();
+      providerInfoRef.current = providerReturn;
+      const renderProps = {
+        name,
+        dom: rootRef.current,
+        basename,
+        memoryRoute,
+        ...resProps,
+      };
+      renderDom.current = rootRef.current;
       LoggerInstance.log(
-        `createRemoteComponent LazyComponent loadRemote info >>>`,
-        { name: moduleName, module: m, exportName },
+        `createRemoteComponent LazyComponent render >>>`,
+        renderProps,
       );
+      providerReturn.render(renderProps);
+    });
 
-      // @ts-ignore
-      const exportFn = m[exportName] as any;
-
-      if (exportName in m && typeof exportFn === 'function') {
-        const RemoteAppComponent = forwardRef<
-          HTMLDivElement,
-          {
-            basename?: ProviderParams['basename'];
-            memoryRoute?: ProviderParams['memoryRoute'];
-          }
-        >((props, _ref) => {
-          return (
-            <RemoteApp
-              name={moduleName}
-              providerInfo={exportFn}
-              exportName={info.export || 'default'}
-              {...props}
-            />
+    return () => {
+      clearTimeout(renderTimeout);
+      setTimeout(() => {
+        if (providerInfoRef.current?.destroy) {
+          LoggerInstance.log(
+            `createRemoteComponent LazyComponent destroy >>>`,
+            { name, basename, dom: renderDom.current },
           );
-        });
+          providerInfoRef.current?.destroy({
+            dom: renderDom.current,
+          });
+        }
+      });
+    };
+  }, []);
 
-        return {
-          default: RemoteAppComponent,
-        };
-      } else {
-        LoggerInstance.log(
-          `createRemoteComponent LazyComponent module not found >>>`,
-          { name: moduleName, module: m, exportName },
-        );
-        throw Error(
-          `Make sure that ${moduleName} has the correct export when export is ${String(
-            exportName,
-          )}`,
-        );
-      }
-    } catch (error) {
-      throw error;
-    }
-  });
-}
+  //@ts-ignore
+  return <div ref={rootRef}></div>;
+};
+
+(RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
 
 export function createRemoteComponent<T, E extends keyof T>(info: {
   loader: () => Promise<T>;
@@ -99,18 +114,121 @@ export function createRemoteComponent<T, E extends keyof T>(info: {
       : {}
     : {};
 
-  const LazyComponent = createLazyRemoteComponent(info);
-
   return (
     props: {
       basename?: ProviderParams['basename'];
       memoryRoute?: ProviderParams['memoryRoute'];
     } & RawComponentType,
   ) => {
+    const exportName = info?.export || 'default';
+    let basename = '/';
+    let enableDispathPopstate = false;
+    let routerContextVal: any;
+    try {
+      ReactRouterDOM.useLocation();
+      enableDispathPopstate = true;
+    } catch {
+      enableDispathPopstate = false;
+    }
+
+    if (props.basename) {
+      basename = props.basename;
+    } else if (enableDispathPopstate) {
+      const ReactRouterDOMAny: any = ReactRouterDOM;
+      // Avoid building tools checking references
+      const useRouteMatch = ReactRouterDOMAny['use' + 'RouteMatch']; //v5
+      const useHistory = ReactRouterDOMAny['use' + 'History']; //v5
+      const useHref = ReactRouterDOMAny['use' + 'Href'];
+      const UNSAFE_RouteContext = ReactRouterDOMAny['UNSAFE_' + 'RouteContext'];
+
+      if (UNSAFE_RouteContext /* react-router@6 */) {
+        if (useHref) {
+          basename = useHref?.('/');
+        }
+        routerContextVal = useContext(UNSAFE_RouteContext);
+        if (
+          routerContextVal &&
+          routerContextVal.matches &&
+          routerContextVal.matches[0] &&
+          routerContextVal.matches[0].pathnameBase
+        ) {
+          basename = pathJoin(
+            basename,
+            routerContextVal.matches[0].pathnameBase || '/',
+          );
+        }
+      } /* react-router@5 */ else {
+        const match = useRouteMatch?.(); // v5
+        if (useHistory /* react-router@5 */) {
+          // there is no dynamic switching of the router version in the project
+          // so hooks can be used in conditional judgment
+          const history = useHistory?.();
+          // To be compatible to history@4.10.1 and @5.3.0 we cannot write like this `history.createHref(pathname)`
+          basename = history?.createHref?.({ pathname: '/' });
+        }
+        if (match /* react-router@5 */) {
+          basename = pathJoin(basename, match?.path || '/');
+        }
+      }
+    }
+
+    const LazyComponent = useMemo(() => {
+      //@ts-ignore
+      return React.lazy(async () => {
+        LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+          basename,
+          lazyComponent: info.loader,
+          exportName,
+          props,
+          routerContextVal,
+        });
+        try {
+          const m = (await info.loader()) as RemoteModule;
+          // @ts-ignore
+          const moduleName = m && m[Symbol.for('mf_module_id')];
+          LoggerInstance.log(
+            `createRemoteComponent LazyComponent loadRemote info >>>`,
+            { basename, name: moduleName, module: m, exportName, props },
+          );
+
+          // @ts-ignore
+          const exportFn = m[exportName] as any;
+
+          if (exportName in m && typeof exportFn === 'function') {
+            return {
+              default: () => (
+                <RemoteApp
+                  name={moduleName}
+                  dispathPopstate={enableDispathPopstate}
+                  {...info}
+                  {...props}
+                  providerInfo={exportFn}
+                  basename={basename}
+                />
+              ),
+            };
+          } else {
+            LoggerInstance.log(
+              `createRemoteComponent LazyComponent module not found >>>`,
+              { basename, name: moduleName, module: m, exportName, props },
+            );
+            throw Error(
+              `Make sure that ${moduleName} has the correct export when export is ${String(
+                exportName,
+              )}`,
+            );
+          }
+        } catch (error) {
+          throw error;
+        }
+      });
+    }, [exportName, basename, props.memoryRoute]);
+
+    //@ts-ignore
     return (
       <ErrorBoundary FallbackComponent={info.fallback}>
         <React.Suspense fallback={info.loading}>
-          <LazyComponent {...props} />
+          <LazyComponent />
         </React.Suspense>
       </ErrorBoundary>
     );

package/src/remote/index.tsx

@@ -1,165 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import * as ReactRouterDOM from 'react-router-dom';
-import type { ProviderParams } from '@module-federation/bridge-shared';
-import { LoggerInstance, pathJoin } from '../utils';
-import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
-
-declare const __APP_VERSION__: string;
-
-export interface RenderFnParams extends ProviderParams {
-  dom?: any;
-}
-
-interface RemoteModule {
-  provider: () => {
-    render: (
-      info: ProviderParams & {
-        dom: any;
-      },
-    ) => void;
-    destroy: (info: { dom: any }) => void;
-  };
-}
-
-interface RemoteAppParams {
-  name: string;
-  providerInfo: NonNullable<RemoteModule['provider']>;
-  exportName: string | number | symbol;
-}
-
-const RemoteApp = ({
-  name,
-  memoryRoute,
-  basename,
-  providerInfo,
-  ...resProps
-}: RemoteAppParams & ProviderParams) => {
-  const rootRef = useRef(null);
-  const renderDom = useRef(null);
-  const providerInfoRef = useRef<any>(null);
-
-  useEffect(() => {
-    const renderTimeout = setTimeout(() => {
-      const providerReturn = providerInfo();
-      providerInfoRef.current = providerReturn;
-      const renderProps = {
-        name,
-        dom: rootRef.current,
-        basename,
-        memoryRoute,
-        ...resProps,
-      };
-      renderDom.current = rootRef.current;
-      LoggerInstance.log(
-        `createRemoteComponent LazyComponent render >>>`,
-        renderProps,
-      );
-      providerReturn.render(renderProps);
-    });
-
-    return () => {
-      clearTimeout(renderTimeout);
-      setTimeout(() => {
-        if (providerInfoRef.current?.destroy) {
-          LoggerInstance.log(
-            `createRemoteComponent LazyComponent destroy >>>`,
-            { name, basename, dom: renderDom.current },
-          );
-          providerInfoRef.current?.destroy({
-            dom: renderDom.current,
-          });
-        }
-      });
-    };
-  }, []);
-
-  //@ts-ignore
-  return <div ref={rootRef}></div>;
-};
-
-(RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
-
-interface ExtraDataProps {
-  basename?: string;
-}
-
-export function withRouterData<P extends Parameters<typeof RemoteApp>[0]>(
-  WrappedComponent: React.ComponentType<P & ExtraDataProps>,
-): React.FC<Omit<P, keyof ExtraDataProps>> {
-  return (props: any) => {
-    let enableDispathPopstate = false;
-    let routerContextVal: any;
-    try {
-      ReactRouterDOM.useLocation();
-      enableDispathPopstate = true;
-    } catch {
-      enableDispathPopstate = false;
-    }
-    let basename = '/';
-
-    if (!props.basename && enableDispathPopstate) {
-      const ReactRouterDOMAny: any = ReactRouterDOM;
-      // Avoid building tools checking references
-      const useRouteMatch = ReactRouterDOMAny['use' + 'RouteMatch']; //v5
-      const useHistory = ReactRouterDOMAny['use' + 'History']; //v5
-      const useHref = ReactRouterDOMAny['use' + 'Href'];
-      const UNSAFE_RouteContext = ReactRouterDOMAny['UNSAFE_' + 'RouteContext'];
-
-      if (UNSAFE_RouteContext /* react-router@6 */) {
-        if (useHref) {
-          basename = useHref?.('/');
-        }
-        routerContextVal = useContext(UNSAFE_RouteContext);
-        if (
-          routerContextVal &&
-          routerContextVal.matches &&
-          routerContextVal.matches.length > 0
-        ) {
-          const matchIndex = routerContextVal.matches.length - 1;
-          const pathnameBase =
-            routerContextVal.matches[matchIndex].pathnameBase;
-          basename = pathJoin(basename, pathnameBase || '/');
-        }
-      } /* react-router@5 */ else {
-        const match = useRouteMatch?.(); // v5
-        if (useHistory /* react-router@5 */) {
-          // there is no dynamic switching of the router version in the project
-          // so hooks can be used in conditional judgment
-          const history = useHistory?.();
-          // To be compatible to history@4.10.1 and @5.3.0 we cannot write like this `history.createHref(pathname)`
-          basename = history?.createHref?.({ pathname: '/' });
-        }
-        if (match /* react-router@5 */) {
-          basename = pathJoin(basename, match?.path || '/');
-        }
-      }
-    }
-
-    LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
-      ...props,
-      basename,
-      routerContextVal,
-      enableDispathPopstate,
-    });
-
-    if (enableDispathPopstate) {
-      const location = ReactRouterDOM.useLocation();
-      const [pathname, setPathname] = useState(location.pathname);
-
-      useEffect(() => {
-        if (pathname !== '' && pathname !== location.pathname) {
-          LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-            name: props.name,
-            pathname: location.pathname,
-          });
-          dispatchPopstateEnv();
-        }
-        setPathname(location.pathname);
-      }, [location]);
-    }
-
-    return <WrappedComponent {...(props as P)} basename={basename} />;
-  };
-}
-
-export default withRouterData(RemoteApp);