Registry / web-framework / standalone-single-spa-webpack-plugin

standalone-single-spa-webpack-plugin

library6.0.0jsnpmunverified

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.

web-framework

npm install standalone-single-spa-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · STANDALONE-SINGLE-

standalone-single-spa-webpack-plugin

web-frameworkjavascriptv6.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

StandaloneSingleSpaPlugin

✓ const StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin');

✗ import StandaloneSingleSpaPlugin from 'standalone-single-spa-webpack-plugin';

The package exports via CommonJS; named import is the default. In ESM contexts, use const { default: StandaloneSingleSpaPlugin } = await import(...).

default

✓ import StandaloneSingleSpaPlugin from 'standalone-single-spa-webpack-plugin';

✗ import { StandaloneSingleSpaPlugin } from 'standalone-single-spa-webpack-plugin';

TypeScript types are provided, but the module is not ESModule; using named import will fail. Use default import or require.

StandaloneSingleSpaPlugin

✓ import StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin');

✗ import { StandaloneSingleSpaPlugin } from 'standalone-single-spa-webpack-plugin';

In TypeScript with esModuleInterop, you can use default import; otherwise, use import = require.

Adds the standalone plugin to webpack config with HtmlWebpackPlugin, enabling development of a single-spa microfrontend in standalone mode.

// webpack.config.js const StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin(), new StandaloneSingleSpaPlugin({ appOrParcelName: 'my-app', moduleFormat: 'esm', // defaults to 'esm' in v6 activeWhen: ['/'], importMapOverrides: true, }), ], devServer: { historyApiFallback: true, }, };

Debug

Known issues

breakingmoduleFormat now defaults to ESM rather than SystemJS in v6

fix

If your project depends on SystemJS, set moduleFormat: 'systemjs' explicitly.

affects: 6.0.0

breakingHtmlWebpackPlugin option is now required in v6

fix

Add new HtmlWebpackPlugin() to plugins array and ensure it runs before StandaloneSingleSpaPlugin.

affects: 6.0.0

breakinghtml-webpack-plugin@3 is no longer supported in v5

fix

Upgrade html-webpack-plugin to version 4 or later.

affects: 5.0.0

deprecatedurlRerouteOnly default changed to true in v3

fix

If you need urlRerouteOnly: false, set startOptions: { urlRerouteOnly: false }.

affects: 3.0.0

gotchaStandalone mode is not equivalent to integrated mode; root config differences may cause issues

fix

Always test in the full single-spa integration environment. Use import-map-overrides for more accurate local development.

affects: >=1.0.0

gotchaPlugin automatically upgrades to latest SystemJS and single-spa versions, which may differ from production

fix

Pin standalone plugin version or use a custom import map to control versions.

affects: >=1.0.0

gotchaNo global scripts, fonts, or CSS are loaded by default in standalone mode

fix

Manually add required global resources via html-webpack-plugin or a custom template.

affects: >=1.0.0

Errors

Common errors & fixes

Error: The standalone-single-spa-webpack-plugin requires HtmlWebpackPlugin to be added to the plugins array before it.

HtmlWebpackPlugin plugin is missing or placed after StandaloneSingleSpaPlugin in the webpack config plugins array.

fix

Ensure new HtmlWebpackPlugin() is added before new StandaloneSingleSpaPlugin(...) in the plugins array.

Module not found: Error: Can't resolve 'single-spa'

single-spa is not installed or not available in node_modules during webpack compilation.

fix

Install single-spa: npm install single-spa

Error: StandaloneSingleSpaPlugin is not a constructor

Misimported the plugin (e.g., named import instead of default import in CommonJS).

fix

Use const StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin');

TypeError: Cannot read properties of undefined (reading 'tap')

HtmlWebpackPlugin is not properly instantiated or not passed to StandaloneSingleSpaPlugin options.

fix

Ensure new HtmlWebpackPlugin() is added to plugins and/or pass the HtmlWebpackPlugin constructor as an option to StandaloneSingleSpaPlugin.

Upgrade

Version history

6.0.0latest on npm

Audit

Dependencies

webpackrequiredpeer dependency; the plugin operates as a webpack plugin

html-webpack-pluginrequiredpeer dependency; required as of v6 to generate the HTML file

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/single-spa/standalone-single-spa-webpack-plugin ↗

packagehttps://www.npmjs.com/package/standalone-single-spa-webpack-plugin ↗