webpack-config-single-spa-ts

8.0.0 verified Sat Apr 25 auth: no javascript

A shared Webpack configuration for single-spa microfrontends using TypeScript. Version 8.0.0 is current, with active development and semver releases. It extends webpack-config-single-spa with TypeScript support via ts-loader and fork-ts-checker-webpack-plugin. Differentiators: tailored for single-spa module system, integrates a standalone plugin for development, and abstracts complex webpack setup. Requires typescript >=4 as a peer dependency.

Common errors

error Module not found: Error: Can't resolve 'ts-loader' ↓

cause ts-loader is a peer dependency not installed automatically

fix

Run npm install --save-dev ts-loader

error TypeError: webpackConfig is not a function ↓

cause Importing the config incorrectly (named import instead of default)

fix

Use import webpackConfig from 'webpack-config-single-spa-ts' (no braces)

error Configuration for rule has an unknown property 'issuer' ↓

cause Using an incompatible version of webpack (requires webpack 5)

fix

Ensure webpack@5 is installed

error Type error: Property 'ConfigOptions' does not exist on type ↓

cause Importing ConfigOptions as a value instead of type

fix

Use import type { ConfigOptions }

Warnings

breaking Upgrade standalone plugin in v8.0.0 ↓

fix Update standalone-single-spa-webpack-plugin to compatible version.

deprecated Older versions use ts-loader defaults that may not support TypeScript 5 ↓

fix Upgrade to v8.0.0 or manually configure ts-loader options.

gotcha Type checking enabled by default slows builds; disable for development ↓

fix Set `disableTypeCheck: true` in config options for faster webpack rebuilds.

gotcha Output filename must be unique per microfrontend to avoid collisions ↓

fix Set `outputFilename` to a unique name like 'my-app.js'.

deprecated Requires Node >=16 as of v8.0.0 ↓

fix Upgrade Node to v16+ or pin to older version.

Install

npm install webpack-config-single-spa-ts

yarn add webpack-config-single-spa-ts

pnpm add webpack-config-single-spa-ts

Imports

default

wrong

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

correct

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

Package exports a default function via ESM. CommonJS require works but ESM is preferred.

type ConfigOptions

wrong

import { ConfigOptions } from 'webpack-config-single-spa-ts'

correct

import type { ConfigOptions } from 'webpack-config-single-spa-ts'

ConfigOptions is exported as a type only; use import type to avoid runtime errors in TypeScript.

require('webpack-config-single-spa-ts')
```
const config = require('webpack-config-single-spa-ts')
```
CJS usage is supported; the default export is the config function.

Quickstart

Basic usage: import the default config function and export its return value with an entry point.

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

export default webpackConfig({
  // Required: specify your microfrontend entry point
  entry: './src/main.ts',
  // Optional: output filename
  outputFilename: 'my-app.js',
  // Optional: disable type checking for faster builds
  disableTypeCheck: false,
});