chore: add errorLoadRemote example in plugin hook

module-federation · Feb 2, 2025 · 2cfbc8c · 2cfbc8c
1 parent 6e9c447
commit 2cfbc8c
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 36 deletions.
diff --git a/apps/router-demo/router-host-2000/rsbuild.config.ts b/apps/router-demo/router-host-2000/rsbuild.config.ts
@@ -35,19 +35,19 @@ export default defineConfig({
         'react-dom': {
           singleton: true,
         },
-        // 'react-router-dom': {
-        //   // singleton: true,
-        //   requiredVersion: '6.x',
-        // },
+        'react-router-dom': {
+          // singleton: true,
+          requiredVersion: '6.x',
+        },
       },
       runtimePlugins: [
         path.join(__dirname, './src/runtime-plugin/shared-strategy.ts'),
         path.join(__dirname, './src/runtime-plugin/retry.ts'),
         path.join(__dirname, './src/runtime-plugin/fallback.ts'),
       ],
-      // bridge: {
-      //   disableAlias: true,
-      // },
+      bridge: {
+        disableAlias: true,
+      },
     }),
   ],
 });
diff --git a/apps/router-demo/router-host-2000/src/App.tsx b/apps/router-demo/router-host-2000/src/App.tsx
@@ -14,10 +14,26 @@ import Home from './pages/Home';
 import './App.css';
 import BridgeReactPlugin from '@module-federation/bridge-react/plugin';
 import { ErrorBoundary } from 'react-error-boundary';
+import Remote1AppNew from 'remote1/app';
+
+const fallbackPlugin: () => FederationRuntimePlugin = function () {
+  return {
+    name: 'fallback-plugin',
+    errorLoadRemote(args) {
+      return { default: () => <div> fallback component </div> };
+    },
+  };
+};
 
 init({
   name: 'federation_consumer',
-  remotes: [],
+  remotes: [
+    {
+      name: 'remote1',
+      alias: 'remote1',
+      entry: 'http://localhost:2001/mf-manifest.json',
+    },
+  ],
   plugins: [
     BridgeReactPlugin(),
     // RetryPlugin({
@@ -36,6 +52,7 @@ init({
     //     },
     //   },
     // }),
+    fallbackPlugin(),
   ],
 });
 
@@ -63,9 +80,7 @@ const Remote1App = createRemoteComponent({
 const Remote1AppWithLoadRemote = React.lazy(() => loadRemote('remote1/app'));
 const Remote1AppWithErrorBoundary = React.forwardRef<any, any>((props, ref) => (
   <ErrorBoundary fallback={<div>Error loading Remote1App...</div>}>
-    <Suspense
-      fallback={<div style={{ color: 'red' }}> Loading Remote1App...</div>}
-    >
+    <Suspense fallback={<div> Loading Remote1App...</div>}>
       <Remote1AppWithLoadRemote {...props} ref={ref} />
     </Suspense>
   </ErrorBoundary>
@@ -102,12 +117,12 @@ function Wraper3() {
       <div className="flex flex-row">
         <div className="grow">
           <h2>Remote1</h2>
-          <Remote1App name={'Ming'} age={12} memoryRoute={{ entryPath: '/' }} />
-          {/* <Remote1AppWithErrorBoundary
+          {/* <Remote1App name={'Ming'} age={12} memoryRoute={{ entryPath: '/' }} /> */}
+          <Remote1AppWithErrorBoundary
             name={'Ming'}
             age={12}
             memoryRoute={{ entryPath: '/' }}
-          /> */}
+          />
         </div>
         <div className="grow">
           <h2>Remote2</h2>
@@ -156,11 +171,7 @@ const App = () => {
             //   ref={ref}
             //   basename="/remote1"
             // />
-            <Remote1App
-              name={'Ming'}
-              age={12}
-              memoryRoute={{ entryPath: '/' }}
-            />
+            <Remote1AppNew name={'Ming'} age={12} />
           )}
         />
         <Route

diff --git a/apps/router-demo/router-host-2000/src/pages/Detail.tsx b/apps/router-demo/router-host-2000/src/pages/Detail.tsx
@@ -1,5 +1,5 @@
 import { loadRemote } from '@module-federation/enhanced/runtime';
-import Button from 'remote1/button';
+// import Button from 'remote1/button';
 
 // console.log('loadRemote', loadRemote);
 // loadRemote("remote1/button").then((m) => {
@@ -11,7 +11,7 @@ function Detail() {
     <div>
       Detail
       <h5>Remote Button</h5>
-      <Button />
+      {/* <Button /> */}
     </div>
   );
 }

diff --git a/apps/router-demo/router-host-2000/src/runtime-plugin/fallback.ts b/apps/router-demo/router-host-2000/src/runtime-plugin/fallback.ts
@@ -1,21 +1,32 @@
-import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
+import type {
+  FederationRuntimePlugin,
+  Manifest,
+} from '@module-federation/runtime';
 // you can alse import fallback constant remote entry fallback data
 import { manifestJson } from './remote-manifest-data';
 
-const fallbackPlugin: () => FederationRuntimePlugin = function () {
+const fallbackPlugin = (): FederationRuntimePlugin => {
   return {
     name: 'fallback-plugin',
     async errorLoadRemote(args) {
       console.log('============ errorLoadRemote ============', args);
       if (args.lifecycle === 'onLoad') {
-        const fallback = 'fallback';
-        return fallback;
+        const React = await import('react');
+        const FallbackComponent = React.memo(() =>
+          React.createElement('div', null, 'fallback component'),
+        );
+        FallbackComponent.displayName = 'FallbackComponent';
+        return () => ({
+          __esModule: true,
+          default: FallbackComponent,
+        });
       } else if (args.lifecycle === 'afterResolve') {
         // you can try another fall back remote entry
         // const response = await fetch('http://localhost:2002/mf-manifest.json');
         // const manifestJson = (await response.json()) as Manifest;
         return manifestJson;
       }
+      return args;
     },
   };
 };

diff --git a/apps/router-demo/router-remote1-2001/rsbuild.config.ts b/apps/router-demo/router-remote1-2001/rsbuild.config.ts
@@ -48,17 +48,17 @@ export default defineConfig({
         'react-dom': {
           singleton: true,
         },
-        // 'react-router-dom': {
-        //   // singleton: true,
-        //   requiredVersion: '5.x',
-        // },
+        'react-router-dom': {
+          // singleton: true,
+          requiredVersion: '5.x',
+        },
         antd: {
           singleton: true,
         },
       },
-      // bridge: {
-      //   disableAlias: true,
-      // },
+      bridge: {
+        disableAlias: true,
+      },
     }),
   ],
 });
diff --git a/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx b/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx
@@ -240,11 +240,7 @@ export default createBridgeComponent({
   appOptions: ({app}) => {
     // Optional: adding a plugin to the new Vue instance on the host application side
     app.use(customPlugin)
-<<<<<<< HEAD
-    return {router}
-=======
     return { router };
->>>>>>> main
   },
 });
 ```