webpack-config-single-spa-react-ts

8.0.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Module not found: Error: Can't resolve 'react-dom' ↓

cause React or ReactDOM not installed as dependencies

fix

npm install react react-dom

error TypeError: singleSpaReactTs.default is not a function ↓

cause Incorrect import style; using ES import instead of require

fix

Use require('webpack-config-single-spa-react-ts') instead of import

error Configuration 'orgName' is required ↓

cause Missing required 'orgName' option when calling the config function

fix

Pass an options object with 'orgName' property (e.g., { orgName: 'my-org' })

Warnings

gotcha 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. ↓

fix Ensure your entry file exports the required lifecycle hooks as described in single-spa docs.

breaking In version 8.0.0, the standalone plugin was upgraded. If you rely on older standalone behavior, your configuration may break. ↓

fix Check the standalone-single-spa-webpack-plugin changelog and update your config accordingly.

deprecated The option 'webpackConfigEnv.reactVersion' has been deprecated. Use the react version defined in your package.json instead. ↓

fix Remove the reactVersion option from your config; the package now reads the version from node_modules.

Install

npm install webpack-config-single-spa-react-ts

yarn add webpack-config-single-spa-react-ts

pnpm add webpack-config-single-spa-react-ts

Imports

default

wrong

import webpackConfig from 'webpack-config-single-spa-react-ts'

correct

const webpackConfig = require('webpack-config-single-spa-react-ts')

This is a CommonJS module; ESM import may not work in all Node versions.

webpackConfigSingleSpaReactTs

wrong

const { config } = require('webpack-config-single-spa-react-ts')

correct

const { webpackConfigSingleSpaReactTs } = require('webpack-config-single-spa-react-ts')

Named export is available but default export is most common.

merge

wrong

const { merge } = require('webpack-config-single-spa-react-ts')

correct

const { merge } = require('webpack-merge')

merge is from webpack-merge, not this package.

Quickstart

Shows how to use the config with custom webpack-merge override for SVG support.

// webpack.config.js
const singleSpaReactTs = require('webpack-config-single-spa-react-ts');
const webpackMerge = require('webpack-merge');

module.exports = (env) => {
  const baseConfig = singleSpaReactTs.default({
    orgName: 'my-org',
    projectName: 'my-app',
    entry: './src/my-org-my-app.js',
  });
  return webpackMerge.merge(baseConfig, {
    // custom webpack config
    module: {
      rules: [
        {
          test: /\.svg$/,
          use: ['@svgr/webpack'],
        },
      ],
    },
  });
};