{"id":27546,"library":"webpack-plugin-module-federation","title":"webpack-plugin-module-federation","description":"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.","status":"deprecated","version":"1.0.0-beta-1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install webpack-plugin-module-federation","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-plugin-module-federation","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-plugin-module-federation","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; requires Webpack 4.x.","package":"webpack","optional":false}],"imports":[{"note":"This package does not export ESM. Use CommonJS require. No default export.","wrong":"import moduleFederationPlugin from 'webpack-plugin-module-federation';","symbol":"moduleFederationPlugin","correct":"const moduleFederationPlugin = require('webpack-plugin-module-federation');"},{"note":"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.","wrong":"const ModuleFederationPlugin = require('webpack-plugin-module-federation').ModuleFederationPlugin;","symbol":"ModuleFederationPlugin","correct":"const { ModuleFederationPlugin } = require('webpack-plugin-module-federation');"},{"note":"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.","wrong":"new require('webpack-plugin-module-federation').ModuleFederationPlugin({...})","symbol":"moduleFederationPlugin","correct":"new (require('webpack-plugin-module-federation'))({...})"}],"quickstart":{"code":"const path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ModuleFederationPlugin = require('webpack-plugin-module-federation');\n\nmodule.exports = {\n  entry: './src/index',\n  mode: 'development',\n  devServer: { port: 3001, hot: true },\n  output: {\n    publicPath: 'http://localhost:3001/',\n  },\n  plugins: [\n    new ModuleFederationPlugin({\n      name: '_federation_app1',\n      library: 'app1',\n      filename: 'remoteEntry.js',\n      libraryTarget: 'global',\n      remotes: {\n        app2: 'app2',\n      },\n      exposes: {\n        App: './src/App',\n      },\n    }),\n    new HtmlWebpackPlugin({ template: './public/index.html' }),\n  ],\n};","lang":"javascript","description":"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."},"warnings":[{"fix":"Consider using Webpack 5 with built-in ModuleFederationPlugin for stable API.","message":"The package is in beta (v1.0.0-beta-1) and may introduce breaking changes without notice.","severity":"breaking","affected_versions":"=1.0.0-beta-1"},{"fix":"Use: const MFPlugin = require('webpack-plugin-module-federation'); new MFPlugin({...})","message":"The configuration example in README has a nested new ModuleFederationPlugin inside new moduleFederationPlugin incorrectly. Correct usage is directly new moduleFederationPlugin(options) with ModuleFederationPlugin options.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Set output.publicPath appropriately and add script tag referencing the remoteEntry.js file.","message":"You must set libraryTarget to 'global' and manually add <script src=\"http://remotPath/remoteEntry.js\"></script> to your HTML for remote consumption to work.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure expose keys match exactly and the remote container is loaded before dynamic import.","message":"Dynamic imports from remotes use strings like 'website2/Title' which depend on the 'expose' configuration key matching in both host and remote.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Migrate to Webpack 5 and use its built-in ModuleFederationPlugin.","message":"This package is a backport for Webpack 4. The official ModuleFederationPlugin is only available in Webpack 5. This package is no longer maintained.","severity":"deprecated","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use: const MFPlugin = require('webpack-plugin-module-federation'); new MFPlugin({...});","cause":"Using new ModuleFederationPlugin({...}) instead of new moduleFederationPlugin({...}) incorrectly.","error":"Error: ModuleFederationPlugin is not a constructor"},{"fix":"Run: npm install --save-dev webpack-plugin-module-federation","cause":"Missing npm install of the package.","error":"Cannot find module 'webpack-plugin-module-federation'"},{"fix":"Use require instead: const MFPlugin = require('webpack-plugin-module-federation');","cause":"Attempting to use ES6 import syntax with CommonJS require in Node.js.","error":"Uncaught SyntaxError: Unexpected token 'export'"},{"fix":"Set libraryTarget: 'global' in ModuleFederationPlugin options.","cause":"Using libraryTarget: 'var' or 'commonjs' incorrectly; this plugin requires 'global'.","error":"remoteEntry.js:1 Uncaught ReferenceError: module is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}