{"id":20734,"library":"webpack-config-single-spa","title":"webpack-config-single-spa","description":"A webpack configuration preset for building in-browser microfrontend modules used with single-spa. Current stable version is 8.0.0, with a moderate release cadence following single-spa ecosystem updates. It simplifies webpack setup by automatically applying single-spa-specific plugins and loaders: sets output.libraryTarget to 'system', adds externals for single-spa dependencies, and configures standalone development mode. Compared to manual webpack configs, it reduces boilerplate and ensures compatibility with single-spa's module lifecycle and import map. Supports React, Angular, Vue, and generic JS modules via companion packages like webpack-config-single-spa-react and webpack-config-single-spa-ts.","status":"active","version":"8.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/single-spa/create-single-spa","tags":["javascript"],"install":[{"cmd":"npm install webpack-config-single-spa","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-config-single-spa","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-config-single-spa","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency to provide webpack instance and plugins","package":"webpack","optional":false},{"reason":"peer dependency for lifecycle and utility functions","package":"single-spa","optional":false}],"imports":[{"note":"ESM-only export. CommonJS require fails with TypeError: webpackConfigSingleSpa is not a function","wrong":"const webpackConfigSingleSpa = require('webpack-config-single-spa')","symbol":"default","correct":"import webpackConfigSingleSpa from 'webpack-config-single-spa'"},{"note":"This package has a default export, not a named export. Named import will be undefined.","wrong":"import { webpackConfigSingleSpa } from 'webpack-config-single-spa'","symbol":"webpackConfigSingleSpa","correct":"import webpackConfigSingleSpa from 'webpack-config-single-spa'"},{"note":"Namespace import results in { default: ... } object; use default import directly.","wrong":"import * as webpackConfigSingleSpa from 'webpack-config-single-spa'","symbol":"webpackConfigSingleSpa","correct":"import webpackConfigSingleSpa from 'webpack-config-single-spa'"}],"quickstart":{"code":"import webpackConfigSingleSpa from 'webpack-config-single-spa';\nimport webpack from 'webpack';\n\nconst config = webpackConfigSingleSpa({\n  // Required: root project directory\n  projectRoot: __dirname,\n  // Optional overrides\n  type: 'root', // or 'app' or 'parcel' depending on module type\n  orgName: 'my-org',\n  projectName: 'my-app',\n});\n\n// Merge with base webpack config (if needed)\nconst mergedConfig = webpack.merge(config, {\n  // additional webpack config\n});\n\nexport default mergedConfig;","lang":"typescript","description":"Shows basic usage: import the default export, call it with options (projectRoot required), and optionally merge with webpack-merge to extend."},"warnings":[{"fix":"If upgrading from v7, remove the extra function call: const config = webpackConfigSingleSpa(options) instead of webpackConfigSingleSpa(options)()","message":"Version 8.0.0 changed the default export signature. The function now returns a webpack configuration object directly instead of a function. Previous version required calling the returned function, e.g., webpackConfigSingleSpa({...})(). In v8, simply call webpackConfigSingleSpa({...}).","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Ensure all peer dependencies (webpack, single-spa, etc.) are installed: npm install webpack single-spa","message":"The package expects that webpack, single-spa, and related plugins are installed as peer dependencies. If missing, webpackConfigSingleSpa may fail with ModuleNotFoundError or missing plugin errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use single-spa's import map or SystemJS to load your microfrontend. Alternatively, set output.libraryTarget to 'module' if using ES modules, but that requires different polyfills.","message":"The generated webpack config sets output.libraryTarget to 'system'. This means your module must be loaded by a SystemJS import map or single-spa's system loader. Trying to import it directly as a script tag will fail with 'System is not defined'.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Replace 'type' with 'moduleType' in your options object.","message":"The 'type' option is deprecated in favor of 'moduleType' in v8. Using 'type' will still work but logs a warning and may be removed in future versions.","severity":"deprecated","affected_versions":">=8.0.0"},{"fix":"Upgrade to webpack@5 and adjust your webpack config for version 5 changes (e.g., module.rules instead of module.loaders).","message":"Version 7.0.0 dropped support for webpack@4. Only webpack@5 is supported. Upgrading from webpack 4 requires webpack 5 and its new configuration format.","severity":"breaking","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use import webpackConfigSingleSpa from 'webpack-config-single-spa' and ensure your package.json has \"type\": \"module\" or use .mjs extension.","cause":"Using CommonJS require() which returns the module.exports object, but the package exports a default ES module function.","error":"TypeError: webpackConfigSingleSpa is not a function"},{"fix":"Run npm install webpack@5 --save-dev","cause":"Missing webpack peer dependency.","error":"Module not found: Error: Can't resolve 'webpack' in '/path/to/project'"},{"fix":"Load SystemJS (or single-spa's bundled version) in your HTML: <script src=\"https://unpkg.com/systemjs/dist/system.js\"></script> and set up import map.","cause":"The generated config sets libraryTarget to 'system', so the module expects SystemJS at runtime, but SystemJS is not loaded in the browser.","error":"System is not defined"},{"fix":"Change to: const config = webpackConfigSingleSpa(options);","cause":"Calling webpackConfigSingleSpa(options)() in v8 which expects direct call, not a second function call (v7 pattern).","error":"Error: You gave us an object for the webpack config instead of a function. If you are using webpack-merge, make sure you are merging with a webpack config, not a function."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}