Module Federation

https://module-federation.io/
Admin
Module Federation is an architectural framework for JavaScript applications that enables...
Tokens:204,210
Snippets:1,911
Trust Score:8.4
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### Install styled-components

Source: https://module-federation.io/guide/basic/css-isolate.html

Command to install the styled-components library.

```bash
npm install styled-components
```

--------------------------------

### Interactive creation of rsbuild consumer

Source: https://module-federation.io/guide/start/quick-start.html

Example of running npm create module-federation@latest and selecting options to create an rsbuild consumer project. The output shows the prompts and final next steps (cd mf_consumer, npm install, npm run dev).

```text
➜  ~  ✗ npm create module-federation@latest

> npx
> create-module-federation

◆  Create Module Federation Project
│
◇  Please input Module Federation name:
│  mf_consumer
│
◇  Please select the type of project you want to create:
│  Application
│
◇  Select template
│  Rsbuild
│
◇  Please select the role of project you want to create:
│  Consumer
│
◇  Next steps ─────╮
│                  │
│  cd mf_consumer  │
│  npm install     │
│  npm run dev     │
│                  │
├──────────────────╯
│
└  Done.
```

--------------------------------

### Install @module-federation/vite with bun

Source: https://module-federation.io/integrations/build-tool/vite.html

Install the plugin using bun as an alternative to npm.

```bash
bun add @module-federation/vite --save
```

--------------------------------

### Install @module-federation/node with bun

Source: https://module-federation.io/plugin/plugins/index.html

Install the required packages using bun. Run this in your project root.

```bash
bun add @module-federation/enhanced @module-federation/node --save
```

--------------------------------

### Install dependencies for mfe1

Source: https://module-federation.io/integrations/practice/react/rsbuild-cra.html

Navigate to the `mfe1` directory and install dependencies with `pnpm i`.

```bash
cd mfe1
pnpm i
```

--------------------------------

### Install @module-federation/observability-plugin

Source: https://module-federation.io/plugin/plugins/observability-plugin.html

Installs the observability plugin package via npm.

```bash
npm install @module-federation/observability-plugin
```

--------------------------------

### Interactive creation of rsbuild provider

Source: https://module-federation.io/guide/start/quick-start.html

Example of running npm create module-federation@latest and selecting options to create an rsbuild provider project. The output shows the prompts and final next steps (cd mf_provider, npm install, npm run dev).

```text
➜  ~  ✗ npm create module-federation@latest

> npx
> create-module-federation

◆  Create Module Federation Project
│
◇  Please input Module Federation name:
│  mf_provider
│
◇  Please select the type of project you want to create:
│  Application
│
◇  Select template
│  Rsbuild
│
◇  Please select the role of project you want to create:
│  Provider
│
◇  Next steps ─────╮
│                  │
│  cd mf_provider  │
│  npm install     │
│  npm run dev     │
│                  │
├──────────────────╯
│
└  Done.
```

--------------------------------

### Install dependencies for mfe2

Source: https://module-federation.io/integrations/practice/react/rsbuild-cra.html

Navigate to the `mfe2` directory and install dependencies with `pnpm i`.

```bash
cd mfe2
pnpm i
```

--------------------------------

### init Usage Example

Source: https://module-federation.io/guide/runtime/runtime-api.html

Example of using the init function to initialize a ModuleFederation runtime instance with a remote and shared dependencies. The example shows how to configure the host name, remote entry, and shared React library.

```javascript
import { init, loadRemote } from '@module-federation/enhanced/runtime';

init({
  name: "mf_host",
  remotes: [
    {
      name: "remote",
      // After configuring an alias, it can be loaded directly through the alias
      alias: "app1",
      // Decide which module to load by specifying the address of the module's manifest.json file
      entry: "http://localhost:2001/mf-manifest.json"
    }
  ],
});
```

--------------------------------

### Install @module-federation/node with npm

Source: https://module-federation.io/plugin/plugins/index.html

Install the required packages using npm. Run this in your project root.

```bash
npm add @module-federation/enhanced @module-federation/node --save
```

--------------------------------

### Install @module-federation/node with pnpm

Source: https://module-federation.io/plugin/plugins/index.html

Install the required packages using pnpm. Run this in your project root.

```bash
pnpm add @module-federation/enhanced @module-federation/node --save
```

--------------------------------

### Install with bun

Source: https://module-federation.io/integrations/build-tool/rstest.html

Install the plugin and core package using bun. Requires @rstest/core@0.11.4 or newer.

```bash
bun add @module-federation/rstest @rstest/core --dev
```

--------------------------------

### Install @module-federation/rsbuild-plugin with bun

Source: https://module-federation.io/integrations/build-tool/rsbuild.html

Install the plugin as a dev dependency using bun.

```bash
bun add @module-federation/rsbuild-plugin --save-dev
```

--------------------------------

### Install @module-federation/node with yarn

Source: https://module-federation.io/plugin/plugins/index.html

Install the required packages using yarn. Run this in your project root.

```bash
yarn add @module-federation/enhanced @module-federation/node --save
```

--------------------------------

### Install @module-federation/vite with yarn

Source: https://module-federation.io/integrations/build-tool/vite.html

Install the plugin using yarn as an alternative to npm.

```bash
yarn add @module-federation/vite --save
```

--------------------------------

### Install @module-federation/vite with pnpm

Source: https://module-federation.io/integrations/build-tool/vite.html

Install the plugin using pnpm as an alternative to npm.

```bash
pnpm add @module-federation/vite --save
```

--------------------------------

### Install @module-federation/modern-js with bun

Source: https://module-federation.io/integrations/framework/modernjs/index.html

Install the Module Federation plugin for Modern.js v2 using bun.

```bash
bun add @module-federation/modern-js --save
```

--------------------------------

### Install with npm

Source: https://module-federation.io/integrations/build-tool/rstest.html

Install the plugin and core package using npm. Requires @rstest/core@0.11.4 or newer.

```bash
npm add @module-federation/rstest @rstest/core --save-dev
```

--------------------------------

### Install with yarn

Source: https://module-federation.io/integrations/build-tool/rstest.html

Install the plugin and core package using yarn. Requires @rstest/core@0.11.4 or newer.

```bash
yarn add @module-federation/rstest @rstest/core --dev
```

--------------------------------

### Install with pnpm

Source: https://module-federation.io/integrations/build-tool/rstest.html

Install the plugin and core package using pnpm. Requires @rstest/core@0.11.4 or newer.

```bash
pnpm add @module-federation/rstest @rstest/core --save-dev
```

--------------------------------

### Markdown docs URLs

Source: https://module-federation.io/ai/index.html

Example URLs showing how to get Markdown versions of docs pages by replacing .html with .md.

```text
# HTML version
https://module-federation.io/guide/basic/runtime.html

# Markdown version
https://module-federation.io/guide/basic/runtime.md
```

--------------------------------

### Before async startup: entrypoint with dynamic import and bootstrap.js

Source: https://module-federation.io/blog/hoisted-runtime.html

Shows the previous approach requiring a dynamic import in the entrypoint and a separate bootstrap.js file that renders the React app. This is the 'Before' tab in the comparison.

```javascript
// entrypoint
import('./bootstrap.js')
```

```javascript
// bootstrap.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

--------------------------------

### registerShared usage with build plugin

Source: https://module-federation.io/guide/runtime/runtime-api.html

Example of registering shared dependencies (react, react-dom, antd) using the build plugin approach. Uses lib for synchronous modules and get for async loading of antd.

```typescript
import { registerShared } from '@module-federation/enhanced/runtime';
import React from 'react';
import ReactDom from 'react-dom';

registerShared({
  react: {
    version: '18.0.0',
    scope: 'default',
    lib: () => React,
    shareConfig: {
      singleton: true,
      requiredVersion: '^18.0.0',
    },
  },
  'react-dom': {
    version: '18.0.0',
    scope: 'default',
    lib: () => ReactDom,
    shareConfig: {
      singleton: true,
      requiredVersion: '^18.0.0',
    },
  },
  antd: {
    version: '1.0.0',
    scope: 'default',
    get: () => import('antd').then((m) => () => m),
  },
});
```

--------------------------------

### After async startup: simplified entrypoint

Source: https://module-federation.io/blog/hoisted-runtime.html

Shows the simplified entrypoint when async startup is enabled, with no dynamic import or separate bootstrap file. This is the 'After' tab in the comparison.

```javascript
// entrypoint
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

--------------------------------

### Quick creation with CLI options

Source: https://module-federation.io/guide/start/quick-start.html

Use these commands to create a project with one click, skipping interactive prompts. The first uses long options, the second uses abbreviations. Both create a Modern.js provider named 'provider' in the 'my-project' directory.

```bash
npx create-module-federation --dir my-project --template provider-modern --name provider

# Use abbreviations
npx create-module-federation -d my-project -t provider-modern -n provider
```

--------------------------------

### Migration from init to getInstance and register functions

Source: https://module-federation.io/guide/runtime/runtime-api.html

Shows the recommended migration from using init to using getInstance, registerRemotes, registerShared, and registerPlugins. The diff shows removing the init call and adding the new registration functions.

```diff
- import { init } from '@module-federation/enhanced/runtime';
+ import { registerShared, registerRemotes, registerPlugins, getInstance } from '@module-federation/enhanced/runtime';
  import React from 'react';
  import mfRuntimePlugin from 'mf-runtime-plugin';

- const instance = init({
-   name: 'mf_host',
-   remotes: [
-     {
-       name: 'remote',
-       entry: 'http://localhost:2001/mf-manifest.json',
-     },
-   ],
-   shared: {
-     react: {
-       version: '18.0.0',
-       scope: 'default',
-       lib: () => React,
-       shareConfig: {
-         singleton: true,
-         requiredVersion: '^18.0.0',
-       },
-     },
-   },
-   plugins: [mfRuntimePlugin()],
- });
+ const instance = getInstance();
+ registerRemotes([
+   {
+     name: 'remote',
+     entry: 'http://localhost:2001/mf-manifest.json',
+   },
+ ]);
+ registerShared({
+   react: {
+     version: '18.0.0',
+     scope: 'default',
+     lib: () => React,
+     shareConfig: {
+       singleton: true,
+       requiredVersion: '^18.0.0',
+     },
+   },
+ });
+ registerPlugins([mfRuntimePlugin()]);
```

--------------------------------

### Install @module-federation/nextjs-mf in mfe2

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs the Module Federation plugin and webpack as dev dependencies in the mfe2 app, then installs dependencies with pnpm.

```bash
cd mfe2
pnpm add @module-federation/nextjs-mf webpack -D
pnpm i
```

--------------------------------

### Install @module-federation/nextjs-mf in mfe1

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs the Module Federation plugin and webpack as dev dependencies in the mfe1 app, then installs dependencies with pnpm.

```bash
cd mfe1
pnpm add @module-federation/nextjs-mf webpack -D
pnpm i
```

--------------------------------

### Create a new Nx workspace

Source: https://module-federation.io/integrations/framework/angular/using-nx-for-angular.html

Initializes a new Nx workspace named 'myorg' with the 'apps' preset, then navigates into the directory.

```bash
npx -y create-nx-workspace@latest myorg --preset=apps
cd myorg
```

--------------------------------

### Install @module-federation/bridge-vue3 with yarn

Source: https://module-federation.io/integrations/practice/vue.html

Install the bridge-vue3 package using yarn.

```bash
yarn add @module-federation/bridge-vue3
```

--------------------------------

### Create App 1 with create rsbuild

Source: https://module-federation.io/integrations/practice/react/rsbuild-cra.html

Run `create rsbuild@latest` and select the target folder `mfe1`, framework `React`, and language `TypeScript`.

```bash
create rsbuild@latest

"Input target folder":
> mfe1

"Select framework":
> React

"Select language":
> TypeScript
```

--------------------------------

### Install @module-federation/bridge-react with pnpm

Source: https://module-federation.io/guide/bridge/react/export-app.html

Install the bridge-react package using pnpm.

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

--------------------------------

### Install @module-federation/bridge-react with yarn

Source: https://module-federation.io/guide/bridge/react/export-app.html

Install the bridge-react package using yarn.

```bash
yarn add @module-federation/bridge-react@latest
```

--------------------------------

### CLI options for create-module-federation

Source: https://module-federation.io/guide/start/quick-start.html

Shows the complete CLI options and available templates for create-module-federation. Use -h for help, -d for directory, -t for template, -n for name, -r for role, and --override to overwrite files.

```text
Usage: create-module-federation [options]

Options:

  -h, --help       display help for command
  -d, --dir        create project in specified directory
  -t, --template   specify the template to use
  -n, --name       specify the mf name
  -r, --role       specify the mf role type: provider or consumer
  --override       override files in target directory

Templates:

  provider-modern, provider-rsbuild, provider-rslib, provider-rslib-storybook, consumer-modern, consumer-rsbuild
```

--------------------------------

### Install @module-federation/bridge-react with npm

Source: https://module-federation.io/guide/bridge/react/export-app.html

Install the bridge-react package using npm.

```bash
npm install @module-federation/bridge-react@latest
```

--------------------------------

### Install retry-plugin via npm

Source: https://module-federation.io/plugin/plugins/retry-plugin.html

Install the @module-federation/retry-plugin package using npm.

```bash
npm install @module-federation/retry-plugin
```

--------------------------------

### createInstance example

Source: https://module-federation.io/guide/runtime/runtime-api.html

Creates a new ModuleFederation instance with a remote and loads a remote module. Use when no build plugin is used, multiple instances are needed, or partitioning is required. The new instance is isolated and does not replace the default instance.

```javascript
import { createInstance } from '@module-federation/enhanced/runtime';

const mf = createInstance({
  name: 'host',
  remotes: [
    {
      name: 'sub1',
      entry: 'http://localhost:8080/mf-manifest.json'
    }
  ]
});

mf.loadRemote('sub1/util').then((m) => m.add(1, 2, 3));
```

--------------------------------

### Install for existing projects with bun

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs the Module Federation plugin and webpack as dev dependencies using bun.

```bash
bun add @module-federation/nextjs-mf webpack -D
```

--------------------------------

### Install @angular-builders/custom-webpack

Source: https://module-federation.io/integrations/framework/angular/angular-mfe.html

Install the custom-webpack builder package using Yarn or npm.

```bash
yarn add @angular-builders/custom-webpack -D
# or
npm i -D @angular-builders/custom-webpack
```

--------------------------------

### Example file layout for data fetching

Source: https://module-federation.io/guide/data/data-fetch.html

Shows the directory structure where each exposed module is paired with a `.data` file of the same name.

```text
.
└── src
    ├── List.tsx
    └── List.data.ts
```

--------------------------------

### Install @auth0/auth0-angular

Source: https://module-federation.io/integrations/framework/angular/auth0.html

Install the Auth0 Angular SDK package via npm.

```bash
npm i @auth0/auth0-angular
```

--------------------------------

### Install and enable Divebell MF Extension

Source: https://module-federation.io/plugin/plugins/observability-plugin.html

Installs the Divebell CLI and MF Extension, then sets up and opens a page with MF diagnostics enabled. Use for a one-off live page investigation without adding the Observability Plugin to the application.

```bash
npm install --global @divebell/cli
divebell extensions add @divebell/extension-mf
divebell setup
divebell open "https://example.com" --mf
```

--------------------------------

### Create App 2 with create rsbuild

Source: https://module-federation.io/integrations/practice/react/rsbuild-cra.html

Run `create rsbuild@latest` and select the target folder `mfe2`, framework `React`, and language `TypeScript`.

```bash
create rsbuild@latest

"Input target folder":
> mfe2

"Select framework":
> React

"Select language":
> TypeScript
```

--------------------------------

### Install @module-federation/rsbuild-plugin with pnpm

Source: https://module-federation.io/integrations/build-tool/rsbuild.html

Install the plugin as a dev dependency using pnpm.

```bash
pnpm add @module-federation/rsbuild-plugin --save-dev
```

--------------------------------

### Install @module-federation/rsbuild-plugin with yarn

Source: https://module-federation.io/integrations/build-tool/rsbuild.html

Install the plugin as a dev dependency using yarn.

```bash
yarn add @module-federation/rsbuild-plugin --save-dev
```

--------------------------------

### Install @module-federation/rsbuild-plugin with npm

Source: https://module-federation.io/integrations/build-tool/rsbuild.html

Install the plugin as a dev dependency using npm.

```bash
npm add @module-federation/rsbuild-plugin --save-dev
```

--------------------------------

### Example __SHARE__ object

Source: https://module-federation.io/guide/debug/variables.html

Shows a concrete example of the __SHARE__ debug variable, illustrating the structure with two instances (manifest_host:0.0.0 and app1:0.1.94) and their shared modules like react-dom/client, react-dom, react/jsx-dev-runtime, react, and react/jsx-runtime.

```json
"__SHARE__": {
  "manifest_host:0.0.0": {
    "default": {
      "react-dom/client": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react-dom": {
        "18.3.1": {
          "deps": [],
          "useIn": ["webpack_provider", "rspack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-dev-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": ["app1", "webpack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react": {
        "18.3.1": {
          "deps": [],
          "useIn": ["webpack_provider", "app1", "rspack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "app1",
          "loading": null,
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "strategy": "loaded-first"
        }
      }
    }
  },
  "app1:0.1.94": {
    "default": {
      "react-dom/client": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react-dom": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-dev-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": ["app1", "webpack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react": {
        "18.3.1": {
          "deps": [],
          "useIn": ["webpack_provider", "app1", "rspack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "app1",
          "loading": null,
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "strategy": "loaded-first"
        }
      }
    }
  }
}
```

--------------------------------

### Install @module-federation/vite with npm

Source: https://module-federation.io/integrations/build-tool/vite.html

Install the plugin using npm. This is the first step in setting up Module Federation with Vite.

```bash
npm add @module-federation/vite --save
```

--------------------------------

### Install @module-federation/bridge-vue3 with pnpm

Source: https://module-federation.io/integrations/practice/vue.html

Install the latest version of the bridge-vue3 package using pnpm.

```bash
pnpm add @module-federation/bridge-vue3@latest
```
Tokens:
Raw