Export Applications
This chapter will introduce how to use createBridgeComponent to export your React application as a module that can be loaded remotely.
Installation
npm install @module-federation/bridge-react@latest
Basic Usage
Step 1: Create Export Entry
To export a React application, you need to create a dedicated export file and use createBridgeComponent to wrap the application as a remote module.
Assuming your application entry is App.tsx, create a new file export-app.tsx:
// ./src/export-app.tsx
import App from './App';
import { createBridgeComponent } from '@module-federation/bridge-react';
// Use createBridgeComponent to wrap App as a remote module and export
export default createBridgeComponent({
rootComponent: App
});
Step 2: Configure exposes Export
Next, you need to configure Module Federation in your build tool to expose the created export file for use by other applications.
Build Tool Support
The following example uses Rsbuild configuration. Please adjust according to your build tool:
- Rsbuild:
@module-federation/rsbuild-plugin
- Rspack:
@module-federation/enhanced/rspack
- Webpack:
@module-federation/enhanced/webpack
- Vite:
@module-federation/vite
// rsbuild.config.ts
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
export default {
plugins: [
pluginModuleFederation({
name: 'remote1',
exposes: {
'./export-app': './src/export-app.tsx', // Export application-type remote module
},
}),
],
};
Bridge Router Configuration
React Bridge provides powerful routing coordination capabilities that can dynamically inject basename and route context passing based on the current path.
Router Framework Support
-
Bridge Router currently supports routing proxy functionality for React Router v5, v6, and v7 versions.
-
It does not support other routing frameworks such as @tanstack/react-router. For applications using non-React Router frameworks, you need to explicitly disable enableBridgeRouter and handle routing logic yourself.
Enable Bridge Router
// rsbuild.config.ts
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
export default {
plugins: [
pluginModuleFederation({
name: 'remote1',
exposes: {
'./export-app': './src/export-app.tsx',
},
bridge: {
// Enable Bridge Router routing capabilities, default is true
enableBridgeRouter: true,
}
}),
],
};
Configuration Description
enableBridgeRouter: true (default) - Automatically handles basename and routing coordination, supports React Router v5, v6, v7enableBridgeRouter: false - Disables Bridge's default routing proxy capabilities, users need to handle routing integration manually
Important
When enabling Bridge Router, do not configure react-router-dom as a shared dependency, otherwise it will cause routing functionality issues.
createBridgeComponent API Reference
Function Signature
function createBridgeComponent<T = any>(
bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>
): () => {
render(info: RenderParams): Promise<void>;
destroy(info: DestroyParams): void;
}
ProviderFnParams<T>
Bridge component configuration parameters:
interface ProviderFnParams<T> {
// Root component
rootComponent: React.ComponentType<T>;
// Custom render function (optional)
render?: (App: React.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
// Custom createRoot function (optional, React 18+)
createRoot?: (container: Element | DocumentFragment, options?: CreateRootOptions) => Root;
// Default createRoot options (React 18+)
defaultRootOptions?: CreateRootOptions;
}
RenderParams
Render parameters interface:
interface RenderParams {
moduleName?: string;
basename?: string;
memoryRoute?: {
entryPath: string;
initialState?: Record<string, unknown>;
};
dom: HTMLElement; // Target DOM element for rendering
rootOptions?: CreateRootOptions; // React 18+ createRoot options
[key: string]: unknown; // Other custom properties
}
DestroyParams
Destroy parameters interface:
interface DestroyParams {
moduleName: string;
dom: HTMLElement;
}
CreateRootOptions
React 18+ createRoot options:
interface CreateRootOptions {
identifierPrefix?: string; // Identifier prefix
onRecoverableError?: (error: unknown) => void; // Recoverable error handling
transitionCallbacks?: unknown; // Transition callbacks
}
Advanced Usage Examples
Custom Rendering Logic
// ./src/export-app.tsx
import App from './App';
import { createBridgeComponent } from '@module-federation/bridge-react';
import { createRoot } from 'react-dom/client';
export default createBridgeComponent({
rootComponent: App,
// Custom render function
render: (App, container) => {
const root = createRoot(container as HTMLElement, {
identifierPrefix: 'my-app-'
});
root.render(App);
return root;
},
// Default createRoot options
defaultRootOptions: {
identifierPrefix: 'remote-app-',
onRecoverableError: (error) => {
console.error('Remote app recoverable error:', error);
}
}
});
Supporting Multiple Exports
// ./src/export-app.tsx
import App from './App';
import Dashboard from './Dashboard';
import { createBridgeComponent } from '@module-federation/bridge-react';
// Export main application
export default createBridgeComponent({
rootComponent: App
});
// Export dashboard component
export const dashboard = createBridgeComponent({
rootComponent: Dashboard
});
Corresponding Module Federation configuration:
// rsbuild.config.ts
export default {
plugins: [
pluginModuleFederation({
name: 'remote1',
exposes: {
'./export-app': './src/export-app.tsx', // Main application
'./dashboard': './src/export-app.tsx', // Dashboard
},
}),
],
};
Next Steps
After completing the export application configuration, you can continue reading Loading Remote Applications to learn how to load this remote application in a host application.
