Guide
Practice
Configuration
Plugins
Showcase
Blog
Ecosystem
Guide
Practice
Configuration
Plugins
Showcase
Blog

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
yarn
pnpm
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, v7
  • enableBridgeRouter: 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.