{"id":20566,"library":"standalone-single-spa-webpack-plugin","title":"Standalone single-spa webpack plugin","description":"A webpack plugin that enables running single-spa microfrontends in standalone mode for development, as an alternative to import-map-overrides. Current stable version is 6.0.0, released with breaking changes: moduleFormat now defaults to ESM instead of SystemJS, and HtmlWebpackPlugin option is now required. The plugin rewrites the microfrontend's HTML and JS to load and mount it as a standalone single-spa application or parcel, with support for import maps, custom props, and start options. It ships TypeScript types and requires webpack and html-webpack-plugin as peer dependencies. Key differentiators: built specifically for single-spa ecosystem, supports ESM and SystemJS module formats, integrates with import-map-overrides UI, and provides a local development experience that simulates the microfrontend being part of a larger single-spa application. However, it is not equivalent to integrated mode and has known pitfalls such as updated single-spa/SystemJS versions and missing global styles/scripts.","status":"active","version":"6.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/single-spa/standalone-single-spa-webpack-plugin","tags":["javascript","webpack","single-spa","standalone","typescript"],"install":[{"cmd":"npm install standalone-single-spa-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add standalone-single-spa-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add standalone-single-spa-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; the plugin operates as a webpack plugin","package":"webpack","optional":false},{"reason":"peer dependency; required as of v6 to generate the HTML file","package":"html-webpack-plugin","optional":false}],"imports":[{"note":"The package exports via CommonJS; named import is the default. In ESM contexts, use const { default: StandaloneSingleSpaPlugin } = await import(...).","wrong":"import StandaloneSingleSpaPlugin from 'standalone-single-spa-webpack-plugin';","symbol":"StandaloneSingleSpaPlugin","correct":"const StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin');"},{"note":"TypeScript types are provided, but the module is not ESModule; using named import will fail. Use default import or require.","wrong":"import { StandaloneSingleSpaPlugin } from 'standalone-single-spa-webpack-plugin';","symbol":"default","correct":"import StandaloneSingleSpaPlugin from 'standalone-single-spa-webpack-plugin';"},{"note":"In TypeScript with esModuleInterop, you can use default import; otherwise, use import = require.","wrong":"import { StandaloneSingleSpaPlugin } from 'standalone-single-spa-webpack-plugin';","symbol":"StandaloneSingleSpaPlugin","correct":"import StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin');"}],"quickstart":{"code":"// webpack.config.js\nconst StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new StandaloneSingleSpaPlugin({\n      appOrParcelName: 'my-app',\n      moduleFormat: 'esm', // defaults to 'esm' in v6\n      activeWhen: ['/'],\n      importMapOverrides: true,\n    }),\n  ],\n  devServer: {\n    historyApiFallback: true,\n  },\n};","lang":"javascript","description":"Adds the standalone plugin to webpack config with HtmlWebpackPlugin, enabling development of a single-spa microfrontend in standalone mode."},"warnings":[{"fix":"If your project depends on SystemJS, set moduleFormat: 'systemjs' explicitly.","message":"moduleFormat now defaults to ESM rather than SystemJS in v6","severity":"breaking","affected_versions":"6.0.0"},{"fix":"Add new HtmlWebpackPlugin() to plugins array and ensure it runs before StandaloneSingleSpaPlugin.","message":"HtmlWebpackPlugin option is now required in v6","severity":"breaking","affected_versions":"6.0.0"},{"fix":"Upgrade html-webpack-plugin to version 4 or later.","message":"html-webpack-plugin@3 is no longer supported in v5","severity":"breaking","affected_versions":"5.0.0"},{"fix":"If you need urlRerouteOnly: false, set startOptions: { urlRerouteOnly: false }.","message":"urlRerouteOnly default changed to true in v3","severity":"deprecated","affected_versions":"3.0.0"},{"fix":"Always test in the full single-spa integration environment. Use import-map-overrides for more accurate local development.","message":"Standalone mode is not equivalent to integrated mode; root config differences may cause issues","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pin standalone plugin version or use a custom import map to control versions.","message":"Plugin automatically upgrades to latest SystemJS and single-spa versions, which may differ from production","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Manually add required global resources via html-webpack-plugin or a custom template.","message":"No global scripts, fonts, or CSS are loaded by default in standalone mode","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure new HtmlWebpackPlugin() is added before new StandaloneSingleSpaPlugin(...) in the plugins array.","cause":"HtmlWebpackPlugin plugin is missing or placed after StandaloneSingleSpaPlugin in the webpack config plugins array.","error":"Error: The standalone-single-spa-webpack-plugin requires HtmlWebpackPlugin to be added to the plugins array before it."},{"fix":"Install single-spa: npm install single-spa","cause":"single-spa is not installed or not available in node_modules during webpack compilation.","error":"Module not found: Error: Can't resolve 'single-spa'"},{"fix":"Use const StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin');","cause":"Misimported the plugin (e.g., named import instead of default import in CommonJS).","error":"Error: StandaloneSingleSpaPlugin is not a constructor"},{"fix":"Ensure new HtmlWebpackPlugin() is added to plugins and/or pass the HtmlWebpackPlugin constructor as an option to StandaloneSingleSpaPlugin.","cause":"HtmlWebpackPlugin is not properly instantiated or not passed to StandaloneSingleSpaPlugin options.","error":"TypeError: Cannot read properties of undefined (reading 'tap')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}