webpack-plugin-module-federation

1.0.0-beta-1 verified Sat Apr 25 auth: no javascript deprecated

A Webpack 4 plugin that implements module federation, allowing multiple separately built applications to share code and dependencies at runtime. This is an early beta (v1.0.0-beta-1) of the official ModuleFederationPlugin backported for Webpack 4, with similar API to the Webpack 5 version. It enables micro-frontends by exposing and consuming remote modules via a dynamic import pattern. Unlike the Webpack 5 built-in, this requires explicit configuration of libraryTarget 'global' and manual addition of remoteEntry.js scripts to HTML. The library is considered experimental, not recommended for production, and lacks the maturity and features of the official Webpack 5 ModuleFederationPlugin.

Common errors

error Error: ModuleFederationPlugin is not a constructor ↓

cause Using new ModuleFederationPlugin({...}) instead of new moduleFederationPlugin({...}) incorrectly.

fix

Use: const MFPlugin = require('webpack-plugin-module-federation'); new MFPlugin({...});

error Cannot find module 'webpack-plugin-module-federation' ↓

cause Missing npm install of the package.

fix

Run: npm install --save-dev webpack-plugin-module-federation

error Uncaught SyntaxError: Unexpected token 'export' ↓

cause Attempting to use ES6 import syntax with CommonJS require in Node.js.

fix

Use require instead: const MFPlugin = require('webpack-plugin-module-federation');

error remoteEntry.js:1 Uncaught ReferenceError: module is not defined ↓

cause Using libraryTarget: 'var' or 'commonjs' incorrectly; this plugin requires 'global'.

fix

Set libraryTarget: 'global' in ModuleFederationPlugin options.

Warnings

breaking The package is in beta (v1.0.0-beta-1) and may introduce breaking changes without notice. ↓

fix Consider using Webpack 5 with built-in ModuleFederationPlugin for stable API.

gotcha The configuration example in README has a nested new ModuleFederationPlugin inside new moduleFederationPlugin incorrectly. Correct usage is directly new moduleFederationPlugin(options) with ModuleFederationPlugin options. ↓

fix Use: const MFPlugin = require('webpack-plugin-module-federation'); new MFPlugin({...})

gotcha You must set libraryTarget to 'global' and manually add <script src="http://remotPath/remoteEntry.js"></script> to your HTML for remote consumption to work. ↓

fix Set output.publicPath appropriately and add script tag referencing the remoteEntry.js file.

gotcha Dynamic imports from remotes use strings like 'website2/Title' which depend on the 'expose' configuration key matching in both host and remote. ↓

fix Ensure expose keys match exactly and the remote container is loaded before dynamic import.

deprecated This package is a backport for Webpack 4. The official ModuleFederationPlugin is only available in Webpack 5. This package is no longer maintained. ↓

fix Migrate to Webpack 5 and use its built-in ModuleFederationPlugin.

Install

npm install webpack-plugin-module-federation

yarn add webpack-plugin-module-federation

pnpm add webpack-plugin-module-federation

Imports

moduleFederationPlugin

wrong

import moduleFederationPlugin from 'webpack-plugin-module-federation';

correct

const moduleFederationPlugin = require('webpack-plugin-module-federation');

This package does not export ESM. Use CommonJS require. No default export.

ModuleFederationPlugin
wrong
```
const ModuleFederationPlugin = require('webpack-plugin-module-federation').ModuleFederationPlugin;
```
correct
```
const { ModuleFederationPlugin } = require('webpack-plugin-module-federation');
```
Named export, not default. Also available as the whole module's default? The README uses require directly as moduleFederationPlugin, but the internal new ModuleFederationPlugin suggests it's a constructor.
moduleFederationPlugin
wrong
```
new require('webpack-plugin-module-federation').ModuleFederationPlugin({...})
```
correct
```
new (require('webpack-plugin-module-federation'))({...})
```
The package exports a constructor function directly. Use new require(...)() or assign to a variable. The README example incorrectly nests new ModuleFederationPlugin inside new moduleFederationPlugin.

Quickstart

Webpack 4 configuration to expose a remote entry point for module federation. Requires setting libraryTarget to 'global' and manually including remoteEntry.js script in host HTML.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack-plugin-module-federation');

module.exports = {
  entry: './src/index',
  mode: 'development',
  devServer: { port: 3001, hot: true },
  output: {
    publicPath: 'http://localhost:3001/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: '_federation_app1',
      library: 'app1',
      filename: 'remoteEntry.js',
      libraryTarget: 'global',
      remotes: {
        app2: 'app2',
      },
      exposes: {
        App: './src/App',
      },
    }),
    new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
};