js-config-webpack-plugin

2.0.3 verified Sat Apr 25 auth: no javascript

A webpack plugin that provides pre-configured JavaScript loader configurations using Babel. Version 2.0.3 requires @babel/core, @babel/preset-env, @babel/preset-react, and webpack >=4.36. It automatically adjusts configuration based on webpack mode (development/production), supporting features like source maps, caching, and environment targets. Part of the common-config-webpack-plugin suite, it aims to simplify webpack loader setup by offering sensible defaults while allowing customization via babelConfigFile option.

Common errors

error Module not found: Error: Can't resolve '@babel/preset-react' ↓

cause Missing required peer dependency @babel/preset-react.

fix

npm install --save-dev @babel/preset-react

error TypeError: Cannot read property 'babel' of undefined ↓

cause Webpack configuration missing 'plugins' array or plugin not instantiated with 'new'.

fix

Ensure your webpack config includes 'plugins: [new JsConfigWebpackPlugin()]' inside module.exports.

error JsConfigWebpackPlugin is not a constructor ↓

cause Attempting to use ES module import style with CJS package.

fix

Use const JsConfigWebpackPlugin = require('js-config-webpack-plugin');

Warnings

breaking Version 2.x drops support for webpack <4 and Babel <7. Requires @babel/preset-react even if not using React. ↓

fix Upgrade to webpack >=4, Babel >=7, and install @babel/preset-react as a dependency.

gotcha The plugin automatically searches for a .babelrc file in the project root. If an unexpected .babelrc exists, it may override the plugin's defaults and cause different transpilation behavior. ↓

fix Either remove custom .babelrc or explicitly set babelConfigFile option to the intended file.

deprecated As of webpack 5, the `webpack` property in peerDependencies may cause warnings. The package has not been officially updated for webpack 5. ↓

fix Use with webpack 4 or manually override peer dependencies; monitor for webpack 5 support.

breaking The plugin requires @babel/preset-env and @babel/preset-react to be installed. Missing them will cause runtime errors during webpack build. ↓

fix Ensure all peer dependencies are installed: npm i --save-dev @babel/core @babel/preset-env @babel/preset-react webpack

Install

npm install js-config-webpack-plugin

yarn add js-config-webpack-plugin

pnpm add js-config-webpack-plugin

Imports

default

wrong

import JsConfigWebpackPlugin from 'js-config-webpack-plugin';

correct

const JsConfigWebpackPlugin = require('js-config-webpack-plugin');

Package is CJS-only; no default ESM export.

JsConfigWebpackPlugin

wrong

import { JsConfigWebpackPlugin } from 'js-config-webpack-plugin';

correct

import JsConfigWebpackPlugin = require('js-config-webpack-plugin');

Not a named export; the plugin is the default export.

usage
wrong
```
JsConfigWebpackPlugin(options)
```
correct
```
new JsConfigWebpackPlugin(options)
```
Must be instantiated with 'new' and placed in plugins array.

Quickstart

Basic webpack config using js-config-webpack-plugin with default Babel presets and production mode.

// webpack.config.js (CJS)
const path = require('path');
const JsConfigWebpackPlugin = require('js-config-webpack-plugin');

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