diff --git a/apps/router-demo/router-host-2000/rsbuild.config.ts b/apps/router-demo/router-host-2000/rsbuild.config.ts
index 2723e7380bc..00c34f80c9e 100644
--- 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
index 75262c77ce9..ed72a7e6710 100644
--- 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: () =>
fallback component
};
+ },
+ };
+};
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((props, ref) => (
Error loading Remote1App...}>
- Loading Remote1App...}
- >
+ Loading Remote1App...}>
@@ -102,12 +117,12 @@ function Wraper3() {
Remote1
-
- {/* */}
+ */}
+ />
Remote2
@@ -156,11 +171,7 @@ const App = () => {
// ref={ref}
// basename="/remote1"
// />
-
+
)}
/>
{
@@ -11,7 +11,7 @@ function Detail() {
Detail
Remote Button
-
+ {/* */}
);
}
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
index 92373c8c30b..177f49d1ed5 100644
--- 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
index 9b7666abaff..5ff3c0a8fe8 100644
--- 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
index 039c2ebcddb..ffac82fd21f 100644
--- 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
},
});
```