{"id":20477,"library":"progress-bar-webpack-plugin","title":"Progress Bar Webpack Plugin","description":"This package provides a customizable progress bar for Webpack builds, leveraging the node-progress library. It supports a wide range of Webpack versions (1.x through 5.x) and offers options like format, width, throttle, custom summary, and chalk integration. Currently at version 2.1.0, it is actively maintained and used to display build progress in the console. Compared to alternatives like webpack's built-in progress plugin or friendly-errors-webpack-plugin, it focuses solely on a minimalist, configurable progress bar with minimal overhead.","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/clessg/progress-bar-webpack-plugin","tags":["javascript","webpack","plugin","progress","bar"],"install":[{"cmd":"npm install progress-bar-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add progress-bar-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add progress-bar-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a Webpack plugin, so it requires Webpack as a peer dependency.","package":"webpack","optional":false}],"imports":[{"note":"This package does not provide a default ESM export; use CommonJS require. The import syntax may fail in Node environments without ESM support.","wrong":"import ProgressBarPlugin from 'progress-bar-webpack-plugin';","symbol":"ProgressBarPlugin","correct":"const ProgressBarPlugin = require('progress-bar-webpack-plugin');"},{"note":"The package exports a single constructor function as module.exports, not a named export. Named import will result in undefined.","wrong":"import { ProgressBarPlugin } from 'progress-bar-webpack-plugin';","symbol":"ProgressBarPlugin","correct":"const progress = require('progress-bar-webpack-plugin');"},{"note":"You must instantiate the plugin with 'new' as it is a class. Omitting 'new' will cause an error in strict mode.","wrong":"plugins: [\n  ProgressBarPlugin()\n]","symbol":"ProgressBarPlugin","correct":"plugins: [\n  new ProgressBarPlugin()\n]"}],"quickstart":{"code":"// webpack.config.js\nconst ProgressBarPlugin = require('progress-bar-webpack-plugin');\n\nmodule.exports = {\n  // ... other config\n  plugins: [\n    new ProgressBarPlugin({\n      format: '  build [:bar] :percent (:elapsed seconds)',\n      clear: false,\n      summary: false,\n      customSummary: (buildTime) => {\n        console.log(`Build completed in ${buildTime}s`);\n      }\n    })\n  ]\n};\n","lang":"javascript","description":"Shows how to require and instantiate the plugin with custom format, clearing disabled, and a custom summary callback."},"warnings":[{"fix":"Use dynamic import: const { default: ProgressBarPlugin } = await import('progress-bar-webpack-plugin'); or stick to CommonJS.","message":"The package uses CommonJS module.exports and does not offer an ESM export. When using ES modules (e.g., 'type': 'module' in package.json or .mjs files), require() is not available, causing a ReferenceError.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use 'new ProgressBarPlugin()'.","message":"If not instantiated with 'new' (e.g., just ProgressBarPlugin() in plugins array), it throws 'TypeError: Class constructor ProgressBarPlugin cannot be invoked without 'new''.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use 'customSummary' option with a function that receives build time in seconds.","message":"Options 'summary' and 'summaryContent' are deprecated in favor of 'customSummary' function.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Set the 'stream' option to process.stdout or a custom writable stream.","message":"The default output stream is stderr. If you redirect stderr or run in an environment where stderr is not visible (e.g., some CI captures), the progress bar will not be seen.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to version 2.1.0 or later for full Webpack 5 compatibility.","message":"Webpack 5 support was added in version 2.1.0. Earlier versions (2.0.x) may have compatibility issues with Webpack 5's hook changes.","severity":"breaking","affected_versions":">=2.0.0 <2.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use 'new ProgressBarPlugin()' instead of 'ProgressBarPlugin()'. For example: plugins: [ new ProgressBarPlugin() ]","cause":"The plugin is instantiated without the 'new' keyword in the plugins array.","error":"TypeError: Class constructor ProgressBarPlugin cannot be invoked without 'new'"},{"fix":"Run 'npm install --save-dev progress-bar-webpack-plugin' to install it.","cause":"The package is not installed or installed as a devDependency but not available in the current environment.","error":"Error: Cannot find module 'progress-bar-webpack-plugin'"},{"fix":"Use: const ProgressBarPlugin = (await import('progress-bar-webpack-plugin')).default; then new ProgressBarPlugin()","cause":"Using dynamic import in ESM and accessing wrong property (e.g., import('pkg') gives an object with default property).","error":"UnhandledPromiseRejectionWarning: TypeError: progress-bar-webpack-plugin is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}