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 }, }); ```