From 6106a0b53c044b035137cb8648e297e742457a40 Mon Sep 17 00:00:00 2001 From: gmendesfonseca Date: Fri, 7 Aug 2026 14:00:09 -0300 Subject: [PATCH] docs(bridge): document the router-free `/base` entry for non-webpack hosts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "Bundle Size Optimization" section presents `bridge.enableBridgeRouter` as the way to drop `react-router-dom`, but that option is implemented only in `packages/enhanced` (webpack) and `packages/rspack`. Two common setups have no plugin to honour it: - `@module-federation/vite`, whose `ModuleFederationOptions` has no `bridge` key at all - pure runtime hosts that call `init()` and `registerRemotes()` directly, with no Module Federation build plugin in the pipeline For both, the only route is importing `@module-federation/bridge-react/base` directly. Today that entry is mentioned once, inside an "How It Works" aside that describes it as a plugin implementation detail requiring "no code changes" — which is the opposite of what these users need to do. Splits the section into the plugin-based path and the manual path, and notes the two things that are not obvious from the type signatures: `/base` does not derive `basename` from React Router context, and the `react-router-dom` peer dependency is unnecessary when importing exclusively from `/base`. --- .../docs/en/guide/bridge/react/load-app.mdx | 36 +++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/apps/website-new/docs/en/guide/bridge/react/load-app.mdx b/apps/website-new/docs/en/guide/bridge/react/load-app.mdx index c266bae68c5..6be77f52e8e 100644 --- a/apps/website-new/docs/en/guide/bridge/react/load-app.mdx +++ b/apps/website-new/docs/en/guide/bridge/react/load-app.mdx @@ -276,9 +276,13 @@ By default, `@module-federation/bridge-react` includes `react-router-dom` in you - Router context passing - Nested routing support -If you don't need React Router integration (or you use a different router), disable `enableBridgeRouter` to reduce bundle size (about ~3KB gzipped) and avoid unnecessary router integration. +If you don't need React Router integration (or you use a different router), you can drop it to reduce bundle size (about ~3KB gzipped) and avoid unnecessary router integration. -### How to Disable Router Dependency +How you do that depends on how your host is built. + +### With webpack or Rspack: `enableBridgeRouter: false` + +`@module-federation/enhanced` (webpack) and `@module-federation/rspack` accept a `bridge` option: ```ts title="rsbuild.config.ts" import { pluginModuleFederation } from '@module-federation/rsbuild-plugin'; @@ -305,3 +309,31 @@ By default, Bridge enables router support to provide the best development experi The plugin automatically resolves imports of `@module-federation/bridge-react` to `@module-federation/bridge-react/base`. That entry does not bundle `react-router-dom`, so no code changes are required. ::: + +### Everywhere else: import from `/base` + +The `bridge` option is implemented by the webpack and Rspack plugins only. If your host does not run one of them there is no plugin to rewrite the import, so point at the router-free entry yourself: + +```ts +// Router-enabled entry (default): +// import { createRemoteAppComponent } from '@module-federation/bridge-react'; + +// Router-free entry: +import { createRemoteAppComponent } from '@module-federation/bridge-react/base'; +``` + +Use this when: + +- you build with [`@module-federation/vite`](/integrations/build-tool/vite.html), which has no `bridge` option +- your host is a **pure runtime host** — it calls `init()` from `@module-federation/runtime` and `registerRemotes()` directly, with no Module Federation build plugin in the pipeline +- you use a router other than React Router, such as `@tanstack/react-router` + +`/base` exposes the same API as the package root — `createBridgeComponent`, `createRemoteComponent`, `createRemoteAppComponent`, `createLazyComponent`, `lazyLoadComponentPlugin` and the data-fetch helpers — without the React Router integration. + +The one behavioural difference is basename handling. The default entry derives a remote's `basename` from the surrounding React Router context; `/base` does not, so pass `basename` to the remote explicitly and let the remote's own router consume it. + +:::tip Peer dependency + +`react-router-dom` is declared in the package's `peerDependencies`, but it is only required by the router-enabled entry. A host that imports exclusively from `/base` can leave it uninstalled and ignore the unmet-peer warning. + +:::