@module-federation/bridge-react 0.0.0-next-20240620060503 → 0.2.0

package/CHANGELOG.md

@@ -1,7 +1,12 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240620060503
+## 0.2.0
+
+### Minor Changes
+
+- d2ab821: feat(bridge): Supports exporting and loading of application-level modules (with routing), currently supports react and vue3
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240620060503
+- Updated dependencies [d2ab821]
+  - @module-federation/bridge-shared@0.2.0

package/__tests__/bridge.spec.tsx

@@ -51,15 +51,17 @@ describe('bridge', () => {
     const BridgeComponent = createBridgeComponent({
       rootComponent: Component,
     });
-    const RemoteComponent = createRemoteComponent(async () => {
-      return {
-        default: BridgeComponent,
-      };
+    const RemoteComponent = createRemoteComponent({
+      loader: async () => {
+        return {
+          default: BridgeComponent,
+        };
+      },
+      fallback: () => <div></div>,
+      loading: <div>loading</div>,
     });
 
-    const { container } = render(
-      <RemoteComponent fallback={<div>loading</div>} msg={'hello world'} />,
-    );
+    const { container } = render(<RemoteComponent msg={'hello world'} />);
     expect(getHtml(container)).toMatch('loading');
 
     await sleep(200);

package/dist/index.cjs.js

@@ -22,6 +22,101 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const ReactRouterDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDOM);
+const ErrorBoundaryContext = React.createContext(null);
+const initialState = {
+  didCatch: false,
+  error: null
+};
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = React.createElement(FallbackComponent, props);
+      } else if (fallback === null || React.isValidElement(fallback)) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+    return React.createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+}
 const RemoteApp = ({
   name,
   memoryRoute,
@@ -83,8 +178,8 @@ const RemoteApp = ({
   }, []);
   return /* @__PURE__ */ React.createElement("div", { ref: rootRef });
 };
-RemoteApp["__APP_VERSION__"] = "0.0.1";
-function createRemoteComponent(lazyComponent, info) {
+RemoteApp["__APP_VERSION__"] = "0.2.0";
+function createRemoteComponent(info) {
   return (props) => {
     var _a;
     const exportName = (info == null ? void 0 : info.export) || "default";
@@ -131,37 +226,50 @@ function createRemoteComponent(lazyComponent, info) {
       return React.lazy(async () => {
         context.LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
           basename,
-          lazyComponent,
+          lazyComponent: info.loader,
           exportName,
           props,
           routerContextVal
         });
-        const m2 = await lazyComponent();
-        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
-              }
-            )
-          };
+        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;
         }
-        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.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

@@ -1,6 +1,8 @@
+import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
+import { ErrorInfo } from 'react';
+import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
-import { ReactNode } from 'react';
 
 export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
     render(info: RenderFnParams & any): void;
@@ -11,14 +13,40 @@ export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>
     __BRIDGE_FN__: (_args: T) => void;
 };
 
-export declare function createRemoteComponent<T, E extends keyof T>(lazyComponent: () => Promise<T>, info?: {
+export declare function createRemoteComponent<T, E extends keyof T>(info: {
+    loader: () => Promise<T>;
+    loading: default_2.ReactNode;
+    fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
     export?: E;
 }): (props: {
-    basename?: ProviderParams['basename'];
-    memoryRoute?: ProviderParams['memoryRoute'];
-    fallback: ReactNode;
+    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 & {
+    fallback?: never;
+    FallbackComponent: ComponentType<FallbackProps>;
+    fallbackRender?: never;
+};
+
+declare type ErrorBoundarySharedProps = PropsWithChildren<{
+    onError?: (error: Error, info: ErrorInfo) => void;
+    onReset?: (details: {
+        reason: "imperative-api";
+        args: any[];
+    } | {
+        reason: "keys";
+        prev: any[] | undefined;
+        next: any[] | undefined;
+    }) => void;
+    resetKeys?: any[];
+}>;
+
+declare type FallbackProps = {
+    error: any;
+    resetErrorBoundary: (...args: any[]) => void;
+};
+
 declare type ProviderFnParams<T> = {
     rootComponent: React_2.ComponentType<T>;
 };

package/dist/index.es.js

@@ -1,8 +1,103 @@
 import * as React from "react";
-import React__default, { useContext, useMemo, useRef, useState, useEffect } from "react";
+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 = {
+  didCatch: false,
+  error: null
+};
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = createElement(FallbackComponent, props);
+      } else if (fallback === null || isValidElement(fallback)) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+    return createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+}
 const RemoteApp = ({
   name,
   memoryRoute,
@@ -64,8 +159,8 @@ const RemoteApp = ({
   }, []);
   return /* @__PURE__ */ React__default.createElement("div", { ref: rootRef });
 };
-RemoteApp["__APP_VERSION__"] = "0.0.1";
-function createRemoteComponent(lazyComponent, info) {
+RemoteApp["__APP_VERSION__"] = "0.2.0";
+function createRemoteComponent(info) {
   return (props) => {
     var _a;
     const exportName = (info == null ? void 0 : info.export) || "default";
@@ -112,37 +207,50 @@ function createRemoteComponent(lazyComponent, info) {
       return React__default.lazy(async () => {
         LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
           basename,
-          lazyComponent,
+          lazyComponent: info.loader,
           exportName,
           props,
           routerContextVal
         });
-        const m2 = await lazyComponent();
-        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
-              }
-            )
-          };
+        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;
         }
-        throw Error("module not found");
       });
     }, [exportName, basename, props.memoryRoute]);
-    return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: props.fallback }, /* @__PURE__ */ React__default.createElement(LazyComponent, null));
+    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/dist/router.cjs.js

@@ -57,26 +57,23 @@ function WraperRouterProvider(props) {
     WraperRouterProviderProps: props,
     router
   });
+  const RouterProvider = ReactRouterDom__namespace["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom__namespace["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom__namespace["createBrowserRouter"];
   if (!routerContextProps)
-    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.RouterProvider, { ...props });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...props });
   if (routerContextProps.memoryRoute) {
-    const MemeoryRouterInstance = ReactRouterDom__namespace.createMemoryRouter(routers, {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
     });
-    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.RouterProvider, { router: MemeoryRouterInstance });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
-    const BrowserRouterInstance = ReactRouterDom__namespace.createBrowserRouter(routers, {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
       basename: routerContextProps.basename,
       future: router.future,
       window: router.window
     });
-    return /* @__PURE__ */ React.createElement(
-      ReactRouterDom__namespace.RouterProvider,
-      {
-        ...propsRes,
-        router: BrowserRouterInstance
-      }
-    );
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
   }
 }
 exports.BrowserRouter = WraperRouter;

package/dist/router.es.js

@@ -39,26 +39,23 @@ function WraperRouterProvider(props) {
     WraperRouterProviderProps: props,
     router
   });
+  const RouterProvider = ReactRouterDom["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
   if (!routerContextProps)
-    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.RouterProvider, { ...props });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...props });
   if (routerContextProps.memoryRoute) {
-    const MemeoryRouterInstance = ReactRouterDom.createMemoryRouter(routers, {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
     });
-    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.RouterProvider, { router: MemeoryRouterInstance });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
-    const BrowserRouterInstance = ReactRouterDom.createBrowserRouter(routers, {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
       basename: routerContextProps.basename,
       future: router.future,
       window: router.window
     });
-    return /* @__PURE__ */ React__default.createElement(
-      ReactRouterDom.RouterProvider,
-      {
-        ...propsRes,
-        router: BrowserRouterInstance
-      }
-    );
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
   }
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240620060503",
+  "version": "0.2.0",
   "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-20240620060503"
+    "@module-federation/bridge-shared": "0.2.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/create.tsx

@@ -1,15 +1,12 @@
-import React, {
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} 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, pathJoin } from './utils';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
+import {
+  ErrorBoundary,
+  ErrorBoundaryPropsWithComponent,
+} from 'react-error-boundary';
 
 declare const __APP_VERSION__: string;
 
@@ -102,12 +99,12 @@ const RemoteApp = ({
 
 (RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
 
-export function createRemoteComponent<T, E extends keyof T>(
-  lazyComponent: () => Promise<T>,
-  info?: {
-    export?: E;
-  },
-) {
+export function createRemoteComponent<T, E extends keyof T>(info: {
+  loader: () => Promise<T>;
+  loading: React.ReactNode;
+  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
+  export?: E;
+}) {
   type ExportType = T[E] extends (...args: any) => any
     ? ReturnType<T[E]>
     : never;
@@ -121,7 +118,6 @@ export function createRemoteComponent<T, E extends keyof T>(
     props: {
       basename?: ProviderParams['basename'];
       memoryRoute?: ProviderParams['memoryRoute'];
-      fallback: ReactNode;
     } & RawComponentType,
   ) => {
     const exportName = info?.export || 'default';
@@ -181,46 +177,60 @@ export function createRemoteComponent<T, E extends keyof T>(
       return React.lazy(async () => {
         LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
           basename,
-          lazyComponent,
+          lazyComponent: info.loader,
           exportName,
           props,
           routerContextVal,
         });
-        const m = (await lazyComponent()) 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}
-              />
-            ),
-          };
-        }
+        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 },
+          );
 
-        throw Error('module not found');
+          // @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 (
-      <React.Suspense fallback={props.fallback}>
-        <LazyComponent />
-      </React.Suspense>
+      <ErrorBoundary FallbackComponent={info.fallback}>
+        <React.Suspense fallback={info.loading}>
+          <LazyComponent />
+        </React.Suspense>
+      </ErrorBoundary>
     );
   };
 }

package/src/router.tsx

@@ -47,24 +47,25 @@ function WraperRouterProvider(
     WraperRouterProviderProps: props,
     router,
   });
-  if (!routerContextProps) return <ReactRouterDom.RouterProvider {...props} />;
+  const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
+  const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];
+  const createBrowserRouter = (ReactRouterDom as any)[
+    'create' + 'BrowserRouter'
+  ];
+  if (!routerContextProps) return <RouterProvider {...props} />;
+
   if (routerContextProps.memoryRoute) {
-    const MemeoryRouterInstance = ReactRouterDom.createMemoryRouter(routers, {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps?.memoryRoute.entryPath],
     });
-    return <ReactRouterDom.RouterProvider router={MemeoryRouterInstance} />;
+    return <RouterProvider router={MemeoryRouterInstance} />;
   } else {
-    const BrowserRouterInstance = ReactRouterDom.createBrowserRouter(routers, {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
       basename: routerContextProps.basename,
       future: router.future,
       window: router.window,
     });
-    return (
-      <ReactRouterDom.RouterProvider
-        {...propsRes}
-        router={BrowserRouterInstance}
-      />
-    );
+    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
   }
 }