webpack-config-single-spa-react

8.0.0 verified Sat Apr 25 auth: no javascript

A helper package for generating webpack configurations tailored for React microfrontends using single-spa. Current stable version is 8.0.0. Part of the create-single-spa ecosystem, it provides a pre-configured webpack setup that handles React JSX, CSS, asset loaders, and exposes the single-spa lifecycle hooks. It wraps webpack-config-single-spa and adds React-specific defaults. The package is designed to simplify the webpack configuration process for React apps in a microfrontend architecture, promoting consistency and best practices. It is actively maintained alongside other single-spa webpack config packages.

Common errors

error Cannot find module 'webpack-config-single-spa-react' ↓

cause Package not installed or import path incorrect.

fix

Run npm install webpack-config-single-spa-react --save-dev

error TypeError: webpackConfigSingleSpaReact is not a function ↓

cause The import is wrong (named instead of default) or variable name mismatch.

fix

Use default import: import webpackConfigSingleSpaReact from 'webpack-config-single-spa-react';

error Error: webpack v4 is not supported ↓

cause This package requires webpack v5+.

fix

Upgrade webpack to v5 or later.

Warnings

breaking v8.0.0 upgraded standalone-single-spa-webpack-plugin which may require changes to standalone mode configuration. ↓

fix Review the changelog for standalone plugin updates and adjust your webpack config if needed.

deprecated CommonJS require() pattern is deprecated and may be removed in a future version. ↓

fix Use ES module import syntax.

gotcha The export is a default export, not named. Using named import will result in undefined. ↓

fix Use default import or require without destructuring: import foo from '...' or const foo = require('...')

gotcha Webpack 5 is required; webpack 4 is not supported. ↓

fix Upgrade webpack to v5 or later.

Install

npm install webpack-config-single-spa-react

yarn add webpack-config-single-spa-react

pnpm add webpack-config-single-spa-react

Imports

default

wrong

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

correct

import webpackConfigSingleSpaReact from 'webpack-config-single-spa-react'

Default export is a module that can be called or merged into webpack config. CommonJS not supported.

webpackConfigSingleSpaReact

wrong

import { webpackConfigSingleSpaReact } from 'webpack-config-single-spa-react'

correct

import webpackConfigSingleSpaReact from 'webpack-config-single-spa-react'

This is a default export, not a named export. Named import will result in undefined.

merge
```
import { merge } from 'webpack-merge'
```
merge is not exported by this package. Use webpack-merge to combine configs.

Quickstart

Shows how to import and use webpackConfigSingleSpaReact in a webpack config file, returning the generated config.

const singleSpaReact = require('single-spa-react');

// webpack.config.js
const webpackConfigSingleSpaReact = require('webpack-config-single-spa-react');
// Or in ESM:
// import webpackConfigSingleSpaReact from 'webpack-config-single-spa-react';

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = webpackConfigSingleSpaReact({
    // options
  });
  return defaultConfig;
};