@module-federation/bridge-react-webpack-plugin NPM

React Bridge

React bridge is used to load the routing module in mf, so that the routing module can work properly with the host environment.

When to use

Load the route module
Load across the front end framework

How to use

1. Install the react bridge library

pnpm add @module-federation/bridge-react

2. Configure the react bridge library

Use createBridgeComponent create component provider

// ./src/index.tsx
import { createBridgeComponent } from '@module-federation/bridge-react';

function App() {
  return ( <BrowserRouter basename="/">
    <Routes>
      <Route path="/" Component={()=> <div>Home page</div>}>
      <Route path="/detail" Component={()=> <div>Detail page</div>}>
    </Routes>
  </BrowserRouter>)
}

export default createBridgeComponent({
  rootComponent: App
});

set alias to proxy

//rsbuild.config.ts
export default defineConfig({
  source: {
    alias: {
      'react-router-dom$': path.resolve(
        __dirname,
        'node_modules/@module-federation/bridge-react/dist/router.es.js',
      ),
    },
  },
  server: {
    port: 2001,
    host: 'localhost',
  },
  dev: {
    assetPrefix: 'http://localhost:2001',
  },
  tools: {
    rspack: (config, { appendPlugins }) => {
      delete config.optimization?.splitChunks;
      config.output!.uniqueName = 'remote1';
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'remote1',
          exposes: {
            './export-app': './src/index.tsx',
          }
        }),
      ]);
    },
  },
});

3. Load the module with routing

//rsbuild.config.ts
export default defineConfig({
  tools: {
    rspack: (config, { appendPlugins }) => {
      config.output!.uniqueName = 'host';
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'host',
          remotes: {
            remote1: 'remote1@http://localhost:2001/mf-manifest.json',
          },
        }),
      ]);
    },
  },
});

Use the module

// ./src/index.tsx
import { createBridgeComponent } from '@module-federation/bridge-react';

const Remote1 = createBridgeComponent(()=> import('remote1/export-app'));

function App() {
  return ( <BrowserRouter basename="/">
    <ul>
      <li>
        <Link to="/">
          Home
        </Link>
      </li>
      <li>
        <Link to="/remote1">
          Remote1
        </Link>
      </li>
    </ul>
    <Routes>
      <Route path="/" Component={()=> <div>Home page</div>}>
      <Route path="/remote1" Component={()=> <Remote1 />}>
    </Routes>
  </BrowserRouter>)
}

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
    <App />
);

11 months ago

12 months ago

9 months ago

6 months ago

12 months ago

12 months ago

10 months ago

9 months ago

12 months ago

9 months ago

10 months ago

10 months ago

10 months ago

9 months ago

10 months ago

11 months ago

8 months ago

7 months ago

10 months ago

9 months ago

9 months ago

7 months ago

9 months ago

7 months ago

10 months ago

7 months ago

10 months ago

11 months ago

9 months ago

10 months ago

9 months ago

8 months ago

11 months ago

12 months ago

7 months ago

7 months ago

7 months ago

10 months ago

8 months ago

9 months ago

12 months ago

7 months ago

10 months ago

7 months ago

11 months ago

12 months ago

9 months ago

9 months ago

7 months ago

8 months ago

8 months ago

9 months ago

10 months ago

9 months ago

12 months ago

12 months ago

9 months ago

9 months ago

8 months ago

10 months ago

10 months ago

9 months ago

12 months ago

7 months ago

12 months ago

10 months ago

7 months ago

12 months ago

9 months ago

8 months ago

8 months ago

12 months ago

9 months ago

11 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

12 months ago

7 months ago

7 months ago

10 months ago

7 months ago

7 months ago

9 months ago

12 months ago

12 months ago

10 months ago

7 months ago

10 months ago

10 months ago

7 months ago

11 months ago

7 months ago

9 months ago

9 months ago

7 months ago

9 months ago

9 months ago

12 months ago

7 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

10 months ago

10 months ago

7 months ago

10 months ago

9 months ago

10 months ago

12 months ago

7 months ago

9 months ago

6 months ago

8 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

7 months ago

11 months ago

9 months ago

9 months ago

9 months ago

11 months ago

7 months ago

9 months ago

9 months ago

10 months ago

9 months ago

6 months ago

10 months ago

12 months ago

7 months ago

10 months ago

11 months ago

7 months ago

10 months ago

11 months ago

6 months ago

9 months ago

7 months ago

7 months ago

12 months ago

10 months ago

10 months ago

12 months ago

9 months ago

9 months ago

7 months ago

10 months ago

9 months ago

6 months ago

8 months ago

7 months ago

10 months ago

12 months ago

7 months ago

10 months ago

9 months ago

9 months ago

11 months ago

10 months ago

6 months ago

9 months ago

10 months ago

12 months ago

7 months ago

11 months ago

9 months ago

11 months ago

12 months ago

7 months ago

10 months ago

12 months ago

9 months ago

10 months ago

10 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

12 months ago

7 months ago

12 months ago

9 months ago

11 months ago

10 months ago

7 months ago

12 months ago

7 months ago

9 months ago

11 months ago

7 months ago

6 months ago

8 months ago

9 months ago

10 months ago

6 months ago

7 months ago

10 months ago

11 months ago

7 months ago

8 months ago

12 months ago

12 months ago

7 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

7 months ago

10 months ago

10 months ago

11 months ago

9 months ago

12 months ago

8 months ago

9 months ago

7 months ago

10 months ago

8 months ago

7 months ago

7 months ago

7 months ago

9 months ago

10 months ago

10 months ago

7 months ago

9 months ago

8 months ago