0
# Module Federation
1

2
Micro-frontend architecture enabling code sharing between independent applications at runtime, with enhanced features beyond standard webpack Module Federation.
3

4
## Capabilities
5

6
### Module Federation Plugin
7

8
Enhanced Module Federation plugin with runtime plugin support and configurable sharing strategies.
9

10
```typescript { .api }
11
/** Enhanced Module Federation with runtime plugins and share strategies */
12
class ModuleFederationPlugin extends RspackBuiltinPlugin {
13
  name: "ModuleFederationPlugin";
14
  constructor(options: ModuleFederationPluginOptions);
15
}
16

17
interface ModuleFederationPluginOptions {
18
  /** Unique name for this federated application */
19
  name: string;
20
  /** Filename for the remote entry file */
21
  filename?: string;
22
  /** Modules to expose to other applications */
23
  exposes?: Exposes;
24
  /** Remote applications to consume */
25
  remotes?: Remotes;
26
  /** Dependencies to share between applications */
27
  shared?: Shared;
28
  /** Runtime plugins to enhance federation behavior */
29
  runtimePlugins?: string[];
30
  /** Custom implementation for federation runtime */
31
  implementation?: string;
32
  /** Strategy for resolving shared dependencies */
33
  shareStrategy?: "version-first" | "loaded-first";
34
  /** Runtime chunk configuration */
35
  runtime?: string | false;
36
  /** Library configuration for the exposed bundle */
37
  library?: LibraryOptions;
38
  /** Share scope name */
39
  shareScope?: string;
40
}
41

42
/** Runtime plugin paths for enhanced functionality */
43
type RuntimePlugins = string[];
44
```
45

46
**Usage Examples:**
47

48
```typescript
49
import { ModuleFederationPlugin } from "@rspack/core";
50

51
// Host application
52
const hostConfig = {
53
  plugins: [
54
    new ModuleFederationPlugin({
55
      name: "host",
56
      remotes: {
57
        mfe1: "mfe1@http://localhost:3001/remoteEntry.js",
58
        mfe2: "mfe2@http://localhost:3002/remoteEntry.js"
59
      },
60
      shared: {
61
        react: { singleton: true },
62
        "react-dom": { singleton: true }
63
      },
64
      shareStrategy: "version-first"
65
    })
66
  ]
67
};
68

69
// Remote application
70
const remoteConfig = {
71
  plugins: [
72
    new ModuleFederationPlugin({
73
      name: "mfe1",
74
      filename: "remoteEntry.js",
75
      exposes: {
76
        "./Button": "./src/Button",
77
        "./utils": "./src/utils"
78
      },
79
      shared: {
80
        react: { singleton: true },
81
        "react-dom": { singleton: true }
82
      },
83
      runtimePlugins: ["./federation-runtime-plugin.js"]
84
    })
85
  ]
86
};
87
```
88

89
### Legacy Module Federation V1
90

91
Original Module Federation interface for backward compatibility.
92

93
```typescript { .api }
94
/** Legacy V1 Module Federation plugin */
95
class ModuleFederationPluginV1 extends RspackBuiltinPlugin {
96
  name: "ModuleFederationPluginV1";
97
  constructor(options: ModuleFederationPluginV1Options);
98
}
99

100
interface ModuleFederationPluginV1Options {
101
  /** Unique name for this federated application */
102
  name: string;
103
  /** Modules to expose */
104
  exposes?: Exposes;
105
  /** Filename for remote entry */
106
  filename?: string;
107
  /** Library configuration */
108
  library?: LibraryOptions;
109
  /** Remote type for loading */
110
  remoteType?: ExternalsType;
111
  /** Remote applications to consume */
112
  remotes?: Remotes;
113
  /** Runtime chunk name */
114
  runtime?: string | false;
115
  /** Share scope name */
116
  shareScope?: string;
117
  /** Shared dependencies */
118
  shared?: Shared;
119
  /** Enable enhanced mode */
120
  enhanced?: boolean;
121
}
122
```
123

124
### Container Plugins
125

126
Core plugins for exposing and consuming federated modules.
127

128
```typescript { .api }
129
/** Expose modules to other applications */
130
class ContainerPlugin extends RspackBuiltinPlugin {
131
  name: "ContainerPlugin";
132
  constructor(options: ContainerPluginOptions);
133
}
134

135
interface ContainerPluginOptions {
136
  /** Unique name for this container */
137
  name: string;
138
  /** Modules to expose */
139
  exposes: Exposes;
140
  /** Filename for the container bundle */
141
  filename?: string;
142
  /** Library configuration */
143
  library?: LibraryOptions;
144
  /** Runtime chunk configuration */
145
  runtime?: string | false;
146
  /** Share scope name */
147
  shareScope?: string;
148
  /** Enable enhanced mode */
149
  enhanced?: boolean;
150
}
151

152
/** Consume modules from remote applications */
153
class ContainerReferencePlugin extends RspackBuiltinPlugin {
154
  name: "ContainerReferencePlugin";
155
  constructor(options: ContainerReferencePluginOptions);
156
}
157

158
interface ContainerReferencePluginOptions {
159
  /** Remote type for loading */
160
  remoteType: ExternalsType;
161
  /** Remote containers to reference */
162
  remotes: Remotes;
163
  /** Share scope name */
164
  shareScope?: string;
165
  /** Enable enhanced mode */
166
  enhanced?: boolean;
167
}
168
```
169

170
### Expose Configuration Types
171

172
Types for configuring module exposure.
173

174
```typescript { .api }
175
/** Configuration for exposing modules */
176
type Exposes = (ExposesItem | ExposesObject)[] | ExposesObject;
177

178
/** Simple string expose */
179
type ExposesItem = string;
180

181
/** Array of expose items */
182
type ExposesItems = ExposesItem[];
183

184
/** Object notation for exposes */
185
interface ExposesObject {
186
  [key: string]: ExposesConfig | ExposesItem | ExposesItems;
187
}
188

189
/** Detailed expose configuration */
190
interface ExposesConfig {
191
  /** Module(s) to expose */
192
  import: ExposesItem | ExposesItems;
193
  /** Custom name for the exposed module */
194
  name?: string;
195
}
196
```
197

198
**Expose Examples:**
199

200
```typescript
201
// String array exposes
202
const exposes1 = ["./Button", "./Input"];
203

204
// Object exposes with simple strings
205
const exposes2 = {
206
  "./Button": "./src/components/Button",
207
  "./Input": "./src/components/Input",
208
  "./utils": "./src/utils"
209
};
210

211
// Detailed expose configuration
212
const exposes3 = {
213
  "./Button": {
214
    import: "./src/components/Button",
215
    name: "CustomButton"
216
  },
217
  "./components": {
218
    import: ["./src/components/Button", "./src/components/Input"]
219
  }
220
};
221
```
222

223
### Remote Configuration Types
224

225
Types for configuring remote container consumption.
226

227
```typescript { .api }
228
/** Configuration for consuming remotes */
229
type Remotes = (RemotesItem | RemotesObject)[] | RemotesObject;
230

231
/** Simple string remote */
232
type RemotesItem = string;
233

234
/** Array of remote items */
235
type RemotesItems = RemotesItem[];
236

237
/** Object notation for remotes */
238
interface RemotesObject {
239
  [key: string]: RemotesConfig | RemotesItem | RemotesItems;
240
}
241

242
/** Detailed remote configuration */
243
interface RemotesConfig {
244
  /** External reference to remote */
245
  external: RemotesItem | RemotesItems;
246
  /** Share scope for this remote */
247
  shareScope?: string;
248
}
249

250
/** External types for remote loading */
251
type ExternalsType = "var" | "module" | "assign" | "this" | "window" | "self" | "global" | 
252
  "commonjs" | "commonjs2" | "commonjs-module" | "amd" | "amd-require" | "umd" | "umd2" | 
253
  "jsonp" | "system" | "promise" | "import" | "script";
254
```
255

256
**Remote Examples:**
257

258
```typescript
259
// String array remotes
260
const remotes1 = ["mfe1@http://localhost:3001/remoteEntry.js"];
261

262
// Object remotes with simple strings  
263
const remotes2 = {
264
  mfe1: "mfe1@http://localhost:3001/remoteEntry.js",
265
  mfe2: "mfe2@http://localhost:3002/remoteEntry.js"
266
};
267

268
// Detailed remote configuration
269
const remotes3 = {
270
  mfe1: {
271
    external: "mfe1@http://localhost:3001/remoteEntry.js",
272
    shareScope: "mfe1-scope"
273
  },
274
  mfe2: {
275
    external: ["mfe2@http://localhost:3002/remoteEntry.js", "mfe2-fallback@http://backup.com/remoteEntry.js"]
276
  }
277
};
278
```
279

280
### Sharing Plugins
281

282
Plugins for managing shared dependencies between federated applications.
283

284
```typescript { .api }
285
/** Configure shared dependencies */
286
class SharePlugin extends RspackBuiltinPlugin {
287
  name: "SharePlugin";
288
  constructor(options: SharePluginOptions);
289
}
290

291
interface SharePluginOptions {
292
  /** Share scope name */
293
  shareScope?: string;
294
  /** Shared dependencies configuration */
295
  shared: Shared;
296
  /** Enable enhanced mode */
297
  enhanced: boolean;
298
}
299

300
/** Consume shared dependencies */
301
class ConsumeSharedPlugin extends RspackBuiltinPlugin {
302
  name: "ConsumeSharedPlugin";
303
  constructor(options: ConsumeSharedPluginOptions);
304
}
305

306
interface ConsumeSharedPluginOptions {
307
  /** Dependencies to consume */
308
  consumes: Consumes;
309
  /** Share scope name */
310
  shareScope?: string;
311
  /** Enable enhanced mode */
312
  enhanced?: boolean;
313
}
314

315
/** Provide shared dependencies */
316
class ProvideSharedPlugin extends RspackBuiltinPlugin {
317
  name: "ProvideSharedPlugin";
318
  constructor(options: ProvideSharedPluginOptions<Enhanced>);
319
}
320

321
interface ProvideSharedPluginOptions<Enhanced extends boolean = false> {
322
  /** Dependencies to provide */
323
  provides: Provides<Enhanced>;
324
  /** Share scope name */
325
  shareScope?: string;
326
  /** Enable enhanced mode */
327
  enhanced?: Enhanced;
328
}
329
```
330

331
### Shared Dependencies Configuration
332

333
Types for configuring shared dependencies across federated applications.
334

335
```typescript { .api }
336
/** Configuration for shared dependencies */
337
type Shared = (SharedItem | SharedObject)[] | SharedObject;
338

339
/** Simple string shared dependency */
340
type SharedItem = string;
341

342
/** Object notation for shared dependencies */
343
interface SharedObject {
344
  [key: string]: SharedConfig | SharedItem;
345
}
346

347
/** Detailed shared dependency configuration */
348
interface SharedConfig {
349
  /** Load shared dependency immediately */
350
  eager?: boolean;
351
  /** Module to import (false to not import) */
352
  import?: false | SharedItem;
353
  /** Package name for version detection */
354
  packageName?: string;
355
  /** Required version constraint */
356
  requiredVersion?: false | string;
357
  /** Key for sharing this dependency */
358
  shareKey?: string;
359
  /** Share scope name */
360
  shareScope?: string;
361
  /** Enforce single instance across all remotes */
362
  singleton?: boolean;
363
  /** Strict version checking */
364
  strictVersion?: boolean;
365
  /** Version to provide */
366
  version?: false | string;
367
}
368
```
369

370
**Shared Examples:**
371

372
```typescript
373
// Simple string array
374
const shared1 = ["react", "react-dom", "lodash"];
375

376
// Object with simple configuration
377
const shared2 = {
378
  react: "^18.0.0",
379
  "react-dom": "^18.0.0",
380
  lodash: "*"
381
};
382

383
// Detailed shared configuration
384
const shared3 = {
385
  react: {
386
    singleton: true,
387
    requiredVersion: "^18.0.0",
388
    strictVersion: true,
389
    eager: false
390
  },
391
  "react-dom": {
392
    singleton: true,
393
    requiredVersion: "^18.0.0",
394
    import: "react-dom"
395
  },
396
  lodash: {
397
    version: "4.17.21",
398
    shareKey: "lodash",
399
    shareScope: "default"
400
  }
401
};
402
```
403

404
### Consume Configuration Types
405

406
Types for configuring consumption of shared dependencies.
407

408
```typescript { .api }
409
/** Configuration for consuming shared dependencies */
410
type Consumes = (ConsumesItem | ConsumesObject)[] | ConsumesObject;
411

412
/** Simple string consume item */
413
type ConsumesItem = string;
414

415
/** Object notation for consumes */
416
interface ConsumesObject {
417
  [key: string]: ConsumesConfig | ConsumesItem;
418
}
419

420
/** Detailed consume configuration */
421
interface ConsumesConfig {
422
  /** Load immediately */
423
  eager?: boolean;
424
  /** Module to import */
425
  import?: false | ConsumesItem;
426
  /** Package name */
427
  packageName?: string;
428
  /** Required version */
429
  requiredVersion?: false | string;
430
  /** Share key */
431
  shareKey?: string;
432
  /** Share scope */
433
  shareScope?: string;
434
  /** Singleton enforcement */
435
  singleton?: boolean;
436
  /** Strict version checking */
437
  strictVersion?: boolean;
438
}
439
```
440

441
### Provide Configuration Types
442

443
Types for configuring provision of shared dependencies.
444

445
```typescript { .api }
446
/** Configuration for providing shared dependencies */
447
type Provides<Enhanced extends boolean> = 
448
  | (ProvidesItem | ProvidesObject<Enhanced>)[]
449
  | ProvidesObject<Enhanced>;
450

451
/** Simple string provide item */
452
type ProvidesItem = string;
453

454
/** Object notation for provides */
455
interface ProvidesObject<Enhanced extends boolean> {
456
  [key: string]: ProvidesConfig<Enhanced> | ProvidesItem;
457
}
458

459
/** Detailed provide configuration (Enhanced mode adds more options) */
460
type ProvidesConfig<Enhanced extends boolean> = Enhanced extends true
461
  ? ProvidesEnhancedConfig
462
  : ProvidesV1Config;
463

464
/** V1 provide configuration */
465
interface ProvidesV1Config {
466
  /** Load immediately */
467
  eager?: boolean;
468
  /** Share key */
469
  shareKey: string;
470
  /** Share scope */
471
  shareScope?: string;
472
  /** Version to provide */
473
  version?: false | string;
474
}
475

476
/** Enhanced provide configuration (includes V1 + additional options) */
477
interface ProvidesEnhancedConfig extends ProvidesV1Config {
478
  /** Singleton enforcement */
479
  singleton?: boolean;
480
  /** Strict version checking */
481
  strictVersion?: boolean;
482
  /** Required version constraint */
483
  requiredVersion?: false | string;
484
}
485
```
486

487
### Runtime Integration
488

489
Module Federation runtime configuration and utilities.
490

491
```typescript { .api }
492
/** Runtime plugin for Module Federation enhancements */
493
class ModuleFederationRuntimePlugin extends RspackBuiltinPlugin {
494
  name: "ModuleFederationRuntimePlugin";
495
  constructor(options?: ModuleFederationRuntimeOptions);
496
}
497

498
interface ModuleFederationRuntimeOptions {
499
  /** Entry runtime configuration */
500
  entryRuntime?: string;
501
}
502

503
/** Container namespace exports */
504
declare const container: {
505
  ContainerPlugin: typeof ContainerPlugin;
506
  ContainerReferencePlugin: typeof ContainerReferencePlugin;
507
  ModuleFederationPlugin: typeof ModuleFederationPlugin;
508
  ModuleFederationPluginV1: typeof ModuleFederationPluginV1;
509
};
510

511
/** Sharing namespace exports */
512
declare const sharing: {
513
  ProvideSharedPlugin: typeof ProvideSharedPlugin;
514
  ConsumeSharedPlugin: typeof ConsumeSharedPlugin;
515
  SharePlugin: typeof SharePlugin;
516
};
517
```
518

519
**Runtime Usage:**
520

521
```typescript
522
// Dynamic remote loading
523
const loadRemoteModule = async (remoteName: string, moduleName: string) => {
524
  try {
525
    const remote = await import(remoteName);
526
    const module = await remote.get(moduleName);
527
    return module();
528
  } catch (error) {
529
    console.error(`Failed to load ${moduleName} from ${remoteName}:`, error);
530
    throw error;
531
  }
532
};
533

534
// Usage in React
535
const RemoteButton = React.lazy(() => loadRemoteModule("mfe1", "./Button"));
536

537
function App() {
538
  return (
539
    <Suspense fallback={<div>Loading...</div>}>
540
      <RemoteButton />
541
    </Suspense>
542
  );
543
}
544
```
545

546
### Advanced Module Federation Patterns
547

548
```typescript
549
// Bi-directional federation
550
const shellConfig = {
551
  plugins: [
552
    new ModuleFederationPlugin({
553
      name: "shell",
554
      filename: "remoteEntry.js",
555
      exposes: {
556
        "./Header": "./src/Header",
557
        "./Navigation": "./src/Navigation"
558
      },
559
      remotes: {
560
        checkout: "checkout@http://localhost:3001/remoteEntry.js",
561
        products: "products@http://localhost:3002/remoteEntry.js"
562
      },
563
      shared: {
564
        react: { singleton: true, version: "18.2.0" },
565
        "react-dom": { singleton: true, version: "18.2.0" },
566
        "react-router-dom": { singleton: true }
567
      }
568
    })
569
  ]
570
};
571

572
// Error boundaries for remote modules
573
class RemoteModuleErrorBoundary extends React.Component {
574
  constructor(props) {
575
    super(props);
576
    this.state = { hasError: false };
577
  }
578

579
  static getDerivedStateFromError(error) {
580
    return { hasError: true };
581
  }
582

583
  componentDidCatch(error, errorInfo) {
584
    console.error("Remote module error:", error, errorInfo);
585
  }
586

587
  render() {
588
    if (this.state.hasError) {
589
      return <div>Something went wrong loading the remote module.</div>;
590
    }
591

592
    return this.props.children;
593
  }
594
}
595
```