Webpack Warnings to Errors Plugin

Common errors

• TypeError: WarningsToErrorsPlugin is not a constructor

  cause The plugin class was not correctly imported or instantiated in the Webpack configuration.
  fix Ensure you are using `new WarningsToErrorsPlugin()` in your `plugins` array. If using CommonJS, use `const WarningsToErrorsPlugin = require('warnings-to-errors-webpack-plugin');`. For ESM, use `import WarningsToErrorsPlugin from 'warnings-to-errors-webpack-plugin';`.

• Module not found: Error: Can't resolve 'warnings-to-errors-webpack-plugin'

  cause The package `warnings-to-errors-webpack-plugin` is not installed or not resolvable by Node.js.
  fix Install the package as a development dependency: `npm install --save-dev warnings-to-errors-webpack-plugin` or `yarn add -D warnings-to-errors-webpack-plugin`.

• Webpack compilation failed with errors. (followed by a list of 'Module Warning (from ...)' entries)

  cause The `warnings-to-errors-webpack-plugin` successfully promoted one or more Webpack warnings into critical errors, halting the build.
  fix Examine the detailed error output to identify the specific warnings. Either fix the underlying cause of the warning in your code or add a rule to `ignoreWarnings` (Webpack 5) or `stats.warningsFilter` (Webpack 2-4) in your Webpack configuration to explicitly suppress that warning.

Warnings

• gotcha The `peerDependencies` of `warnings-to-errors-webpack-plugin` (`^2.2.0-rc || ^3 || ^4 || ^5`) indicate broad compatibility across Webpack versions 2 through 5. However, older documentation or general 'Breaking Changes' sections might state a requirement for `webpack >= 4.0.0`, which can be confusing. Always refer to the `peerDependencies` in `package.json` for the most accurate compatibility information.
  Fix: Verify your Webpack version against the `peerDependencies` field of the `warnings-to-errors-webpack-plugin` in your `node_modules` directory or on npmjs.com for exact compatibility. The plugin generally supports a wide range of Webpack versions.
• breaking Webpack 5 deprecated `stats.warningsFilter` in favor of the new `ignoreWarnings` option. While the plugin is designed to work with both, projects upgrading to Webpack 5 should migrate their warning exclusion logic from `stats.warningsFilter` to `ignoreWarnings` for future compatibility and best practice.
  Fix: For Webpack 5, use the `ignoreWarnings` array in your top-level Webpack configuration: `module.exports = { ignoreWarnings: [{ message: /pattern/ }] };`. Avoid `stats.warningsFilter` in Webpack 5.
• gotcha Enabling this plugin fundamentally changes Webpack's error reporting. Any warning, no matter how minor, will halt the build process with an error exit code. This is the plugin's intended behavior but can be unexpected if developers are not accustomed to a strict build environment, potentially failing CI/CD pipelines that previously passed with warnings.
  Fix: Ensure all team members are aware of the strict build policy. Proactively address all existing warnings or configure `ignoreWarnings` (Webpack 5) or `stats.warningsFilter` (Webpack 2-4) to explicitly allow specific non-critical warnings.
• gotcha When using this plugin to prevent asset emission on warnings, the configuration differs between Webpack versions. For Webpack v4 and v5, you should use `optimization.noEmitOnErrors: true`. For older versions (v2 and v3), you need to explicitly add `new webpack.NoEmitOnErrorsPlugin()` to your plugins array.
  Fix: For Webpack v4/v5, configure `optimization: { noEmitOnErrors: true }`. For Webpack v2/v3, ensure `new webpack.NoEmitOnErrorsPlugin()` is included in your `plugins` array alongside `WarningsToErrorsPlugin`.

Install

• npm install warnings-to-errors-webpack-plugin npm
• yarn add warnings-to-errors-webpack-plugin yarn
• pnpm add warnings-to-errors-webpack-plugin pnpm

Imports

• WarningsToErrorsPlugin
  wrong:

  import WarningsToErrorsPlugin from 'warnings-to-errors-webpack-plugin';

  correct:

  const WarningsToErrorsPlugin = require('warnings-to-errors-webpack-plugin');

  CommonJS `require` is the most common usage shown in documentation. For ESM, use default import.
• WarningsToErrorsPlugin
  wrong:

  import { WarningsToErrorsPlugin } from 'warnings-to-errors-webpack-plugin';

  correct:

  import WarningsToErrorsPlugin from 'warnings-to-errors-webpack-plugin';

  This plugin exports a class as its default, not as a named export. TypeScript users will typically use this import style.
• WarningsToErrorsPlugin (TypeScript Type)

  import WarningsToErrorsPlugin from 'warnings-to-errors-webpack-plugin';
  // ...
  const plugin: WarningsToErrorsPlugin = new WarningsToErrorsPlugin();

  The package ships TypeScript type definitions, enabling type-safe usage and autocompletion.

Quickstart

Demonstrates basic setup, converting all Webpack warnings into errors, and how to ignore specific warnings in Webpack 5.

const WarningsToErrorsPlugin = require('warnings-to-errors-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: require('path').resolve(__dirname, 'dist'),
  },
  plugins: [
    new WarningsToErrorsPlugin(),
  ],
  // Example for Webpack 5 ignoring a specific warning pattern
  ignoreWarnings: [
    { message: /Critical dependency: the request of a dependency is an expression/ }
  ],
  // For Webpack v2, v3, and v4, use stats.warningsFilter instead of ignoreWarnings
  // stats: {
  //   warningsFilter: [/some warning pattern/]
  // }
};