ts-config-webpack-plugin

2.0.3 verified Sat Apr 25 auth: no javascript

A webpack plugin that automates TypeScript loader configuration using ts-loader, thread-loader, and fork-ts-checker-webpack-plugin with sensible defaults for development and production builds. Version 2.0.3 requires webpack >=4.36.0 and TypeScript >=3.1.0. Part of the common-config-webpack-plugin suite, it adjusts settings based on webpack mode. Key differentiator: zero-config TypeScript webpack loader setup with multi-threaded compilation and type checking.

Common errors

error Error: Cannot find module 'ts-config-webpack-plugin' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install --save-dev ts-config-webpack-plugin' or add it to devDependencies.

error TypeError: TsConfigWebpackPlugin is not a constructor ↓

cause Importing the plugin incorrectly (e.g., named import instead of default).

fix

Use 'const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');' or 'import TsConfigWebpackPlugin from 'ts-config-webpack-plugin';' (if bundler supports it).

error Error: Cannot find module 'typescript' ↓

cause TypeScript is not installed as a peer dependency.

fix

Run 'npm install --save-dev typescript' or install a compatible version.

Warnings

breaking Version 2.x changed the plugin API; the constructor no longer accepts a single options object with mode property; use new TsConfigWebpackPlugin(options) where options may include configFile but mode is derived from webpack mode. ↓

fix Remove mode from options and set webpack mode in the config directly. If you must override, use webpack's mode or set process.env.NODE_ENV.

deprecated The option `configFile` fallback to src/config/tsconfig.base.json is deprecated and will be removed in a future version. ↓

fix Ensure a valid tsconfig.json exists at the project root or provide an explicit configFile option.

gotcha The plugin does not work with webpack 5 out of the box; it may require additional configuration or updates to peer dependencies. ↓

fix Use webpack 4 for guaranteed compatibility, or manually update loader versions if using webpack 5.

gotcha thread-loader is automatically injected but may cause issues with certain TypeScript features like emitDecoratorMetadata. ↓

fix Disable thread-loader by configuring the plugin with `threadLoader: false` (not officially documented; inspect plugin source or use custom loader configuration).

deprecated The package is part of the common-config-webpack-plugin suite which has not been updated recently; check for newer alternatives like ts-loader or babel-loader with TypeScript directly. ↓

fix Consider using ts-loader directly with thread-loader and fork-ts-checker-webpack-plugin for more control and active maintenance.

Install

npm install ts-config-webpack-plugin

yarn add ts-config-webpack-plugin

pnpm add ts-config-webpack-plugin

Imports

TsConfigWebpackPlugin
wrong
```
import TsConfigWebpackPlugin from 'ts-config-webpack-plugin';
```
correct
```
const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
```
This package does not ship TypeScript types and uses module.exports, so CommonJS require() is the standard. ESM import may fail in Node.js without special configuration.
TsConfigWebpackPlugin (default import)
wrong
```
const { TsConfigWebpackPlugin } = require('ts-config-webpack-plugin');
```
correct
```
import TsConfigWebpackPlugin from 'ts-config-webpack-plugin';
```
While the package does not natively support ESM, some bundlers may handle default import. Named destructured require is incorrect because the plugin is exported directly as the constructor.

TsConfigWebpackPlugin (type)

wrong

import type { TsConfigWebpackPlugin } from 'ts-config-webpack-plugin';

correct

// No type imports available. Use:
/** @type {import('ts-config-webpack-plugin')} */

The package does not export TypeScript types; use JSDoc for type hints if needed.

Quickstart

Minimal webpack config using ts-config-webpack-plugin to compile TypeScript with ts-loader and thread-loader in development mode.

const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  plugins: [
    new TsConfigWebpackPlugin()
  ]
};