{"id":20731,"library":"webpack-config-single-spa-react-ts","title":"webpack-config-single-spa-react-ts","description":"Shareable webpack configuration for single-spa React microfrontends using TypeScript. Provides a pre-configured webpack setup that handles TypeScript compilation, React JSX transform, CSS processing, and the single-spa lifecycle. Current stable version is 8.0.0, released as part of the create-single-spa monorepo with frequent updates. Differentiates from manual webpack setups by automatically integrating single-spa's standalone plugin and optimizing for microfrontend development. Supports both development and production builds, with hot module replacement and standalone single-spa setup out of the box.","status":"active","version":"8.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/single-spa/create-single-spa","tags":["javascript","single-spa","microfrontends","webpack","react","typescript"],"install":[{"cmd":"npm install webpack-config-single-spa-react-ts","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-config-single-spa-react-ts","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-config-single-spa-react-ts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"core build tool","package":"webpack","optional":false},{"reason":"required for running webpack commands","package":"webpack-cli","optional":false},{"reason":"base configuration for React microfrontends","package":"webpack-config-single-spa-react","optional":false},{"reason":"base configuration for TypeScript support","package":"webpack-config-single-spa-ts","optional":false},{"reason":"required for TypeScript compilation","package":"typescript","optional":false}],"imports":[{"note":"This is a CommonJS module; ESM import may not work in all Node versions.","wrong":"import webpackConfig from 'webpack-config-single-spa-react-ts'","symbol":"default","correct":"const webpackConfig = require('webpack-config-single-spa-react-ts')"},{"note":"Named export is available but default export is most common.","wrong":"const { config } = require('webpack-config-single-spa-react-ts')","symbol":"webpackConfigSingleSpaReactTs","correct":"const { webpackConfigSingleSpaReactTs } = require('webpack-config-single-spa-react-ts')"},{"note":"merge is from webpack-merge, not this package.","wrong":"const { merge } = require('webpack-config-single-spa-react-ts')","symbol":"merge","correct":"const { merge } = require('webpack-merge')"}],"quickstart":{"code":"// webpack.config.js\nconst singleSpaReactTs = require('webpack-config-single-spa-react-ts');\nconst webpackMerge = require('webpack-merge');\n\nmodule.exports = (env) => {\n  const baseConfig = singleSpaReactTs.default({\n    orgName: 'my-org',\n    projectName: 'my-app',\n    entry: './src/my-org-my-app.js',\n  });\n  return webpackMerge.merge(baseConfig, {\n    // custom webpack config\n    module: {\n      rules: [\n        {\n          test: /\\.svg$/,\n          use: ['@svgr/webpack'],\n        },\n      ],\n    },\n  });\n};","lang":"javascript","description":"Shows how to use the config with custom webpack-merge override for SVG support."},"warnings":[{"fix":"Ensure your entry file exports the required lifecycle hooks as described in single-spa docs.","message":"The config expects the entry file to export single-spa lifecycle hooks. If your entry file does not export bootstrap, mount, and unmount, the microfrontend will not work.","severity":"gotcha","affected_versions":">=6.0.0"},{"fix":"Check the standalone-single-spa-webpack-plugin changelog and update your config accordingly.","message":"In version 8.0.0, the standalone plugin was upgraded. If you rely on older standalone behavior, your configuration may break.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Remove the reactVersion option from your config; the package now reads the version from node_modules.","message":"The option 'webpackConfigEnv.reactVersion' has been deprecated. Use the react version defined in your package.json instead.","severity":"deprecated","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":"npm install react react-dom","cause":"React or ReactDOM not installed as dependencies","error":"Module not found: Error: Can't resolve 'react-dom'"},{"fix":"Use require('webpack-config-single-spa-react-ts') instead of import","cause":"Incorrect import style; using ES import instead of require","error":"TypeError: singleSpaReactTs.default is not a function"},{"fix":"Pass an options object with 'orgName' property (e.g., { orgName: 'my-org' })","cause":"Missing required 'orgName' option when calling the config function","error":"Configuration 'orgName' is required"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}