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

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

Latest version **2.9.0** (published 2026-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @module-federation/bridge-react-webpack-plugin
pnpm add @module-federation/bridge-react-webpack-plugin
yarn add @module-federation/bridge-react-webpack-plugin
bun add @module-federation/bridge-react-webpack-plugin
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.9.0 |
| Published | 2026-08-24 |
| First published | 2024-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 2633 |
| Author | zhouxiao |
| Maintainers | zackljackson, heal, shawzhou, gioboa |

## Links

- npm: https://www.npmjs.com/package/@module-federation/bridge-react-webpack-plugin
- Repository: https://github.com/module-federation/core
- Homepage: https://github.com/module-federation/core#readme
- Issues: https://github.com/module-federation/core/issues
- npm.io page: https://npm.io/package/@module-federation/bridge-react-webpack-plugin

## Dependencies (1)

- [@module-federation/sdk](https://npm.io/package/@module-federation/sdk.md) 2.9.0

## Recent versions

- 2.9.0 (latest) — 2026-08-24
- 0.0.0-release-v2-9-0-20260824030637 (next) — 2026-08-24
- 0.0.0-fix-runtime-core-set-shared-lib-20260819111025 — 2026-08-19
- 0.0.0-feat-preload-asset-url-dedupe-20260819073808 — 2026-08-19
- 0.0.0-feat-preload-asset-url-dedupe-20260819072341 — 2026-08-19
- 2.8.2 — 2026-08-06
- 0.0.0-feat-operate-openruntime-20260803054425 — 2026-08-03
- 0.0.0-feat-operate-openruntime-20260729120109 — 2026-07-29
- 0.0.0-feat-operate-openruntime-20260729082849 — 2026-07-29
- 2.8.1 — 2026-07-28
- 0.0.0-feat-operate-openruntime-20260726151341 — 2026-07-26
- 0.0.0-feat-operate-openruntime-20260726083609 — 2026-07-26
- 0.0.0-codex-rspress-codeblock-transform-20260724100038 — 2026-07-24
- 0.0.0-feat-operate-openruntime-20260722064424 — 2026-07-22
- 0.0.0-main-20260720131707 — 2026-07-20
- … 866 more at https://npm.io/package/@module-federation/bridge-react-webpack-plugin/versions

## README

# 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

```bash
pnpm add @module-federation/bridge-react
```

# 2. Configure the react bridge library

> Use createBridgeComponent create component provider

```jsx
// ./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

```js
//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

```js
//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

```jsx
// ./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 />
);
```

---
_Source: https://npm.io/package/@module-federation/bridge-react-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._