{"id":15933,"library":"webpack-notifier","title":"Webpack Build Status Notifier","description":"webpack-notifier is a webpack plugin that integrates with node-notifier to provide system-level notifications for webpack build statuses. It's currently at version 1.15.0 and seems to have a moderate release cadence, focusing on stability and compatibility. Key differentiators include its ability to notify on the first run (success/fail), all failed runs, and the first successful run after a failure, remaining silent otherwise to avoid notification spam. It notably improves upon its predecessor, webpack-error-notification, by adding robust support for Windows and eliminating the need for manual `terminal-notifier` installation on OS X, making it more cross-platform friendly. It leverages the underlying `node-notifier` library, which handles platform-specific notification mechanisms. The plugin offers various configuration options for notification titles, content images, and controlling when notifications are triggered (e.g., excluding warnings, always notifying, or only on error).","status":"active","version":"1.15.0","language":"javascript","source_language":"en","source_url":"https://github.com/Turbo87/webpack-notifier","tags":["javascript","webpack","notify","notification","node-notifier","notifier","build","typescript"],"install":[{"cmd":"npm install webpack-notifier","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-notifier","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-notifier","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for displaying system notifications. Users may need to install additional OS-specific tools depending on node-notifier's requirements.","package":"node-notifier","optional":false},{"reason":"Peer dependency as it's a webpack plugin.","package":"webpack","optional":false},{"reason":"TypeScript type definitions for webpack, a peer dependency for type safety.","package":"@types/webpack","optional":true}],"imports":[{"note":"The plugin is exported as a default export in CommonJS and ESM contexts.","wrong":"import { WebpackNotifierPlugin } from 'webpack-notifier';","symbol":"WebpackNotifierPlugin","correct":"import WebpackNotifierPlugin from 'webpack-notifier';\n// or for CommonJS\nconst WebpackNotifierPlugin = require('webpack-notifier');"},{"note":"Configuration options are passed as a plain object to the constructor.","wrong":"new WebpackNotifierPlugin({ 'title': 'My Build' });","symbol":"Configuration options","correct":"new WebpackNotifierPlugin({ title: 'My Build', excludeWarnings: true });"},{"note":"When using TypeScript, import the type if you only need type declarations without runtime import.","symbol":"WebpackNotifierPlugin","correct":"import type WebpackNotifierPlugin from 'webpack-notifier';"}],"quickstart":{"code":"const path = require('path');\nconst WebpackNotifierPlugin = require('webpack-notifier');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  plugins: [\n    new WebpackNotifierPlugin({\n      title: 'My Webpack Build',\n      alwaysNotify: true, // Be 'noisy' and notify on every build\n      contentImage: path.join(__dirname, 'logo.png'), // Ensure 'logo.png' exists for this to work\n      excludeWarnings: false, // Show warnings in notifications\n      skipFirstNotification: false // Notify on the initial build\n    }),\n  ],\n  // Create a dummy logo.png for the example to be runnable\n  // For a real project, replace with an actual image path.\n  // This ensures the example is complete without external files.\n  // fs.writeFileSync(path.join(__dirname, 'logo.png'), 'dummy data'); // Not ideal for quickstart code but illustrates the point\n};\n","lang":"javascript","description":"This quickstart demonstrates how to integrate webpack-notifier into a basic webpack configuration, showing how to instantiate the plugin and configure common options like `title`, `alwaysNotify`, `contentImage`, `excludeWarnings`, and `skipFirstNotification`."},"warnings":[{"fix":"Check the `node-notifier` documentation for your operating system's specific requirements and install any necessary dependencies manually: `https://github.com/mikaelbr/node-notifier#requirements`","message":"webpack-notifier relies on the `node-notifier` package, which itself has platform-specific requirements. Users might need to install additional system tools (e.g., `growl` on macOS prior to Big Sur, or `snoretoast` on Windows for some versions) for notifications to function correctly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `terminal-notifier` is uninstalled if it was previously manually installed for older notification plugins, as `webpack-notifier` handles this automatically via `node-notifier`.","message":"When migrating from `webpack-error-notification`, be aware that `webpack-notifier` provides improved Windows support and removes the need for `terminal-notifier` on OS X, simplifying setup but changing the underlying notification mechanism.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update to `webpack-notifier@1.3.0` or higher to benefit from clearer, prefixed error and warning messages in your system notifications.","message":"Prior to v1.3.0, error and warning messages in notifications did not have specific prefixes. Since v1.3.0, messages are prefixed for clearer identification.","severity":"gotcha","affected_versions":"<1.3.0"},{"fix":"Check system preferences/settings for notifications. On macOS, look under 'Notifications & Focus'. On Windows, 'System > Notifications & actions'. Ensure notifications are enabled for the process running webpack.","message":"If notifications are not appearing, ensure that your operating system's notification settings are configured to allow notifications from the application running webpack (e.g., your terminal or IDE).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Use `const WebpackNotifierPlugin = require('webpack-notifier');` for CommonJS or `import WebpackNotifierPlugin from 'webpack-notifier';` for ESM.","cause":"Attempting to import WebpackNotifierPlugin as a named export when it is a default export.","error":"TypeError: WebpackNotifierPlugin is not a constructor"},{"fix":"Consider using the `onlyOnError: true` and `excludeWarnings: true` options to reduce notification frequency, or implement a custom `message` function in the plugin configuration to truncate lengthy error messages before they are passed to the notifier.","cause":"This error often originates from `node-notifier` when the message content (especially with large stack traces in errors) is too long for the underlying notification system's stdout buffer.","error":"Error: stdout maxBuffer exceeded"},{"fix":"Refer to the `node-notifier` 'Requirements' section on its GitHub page (`https://github.com/mikaelbr/node-notifier#requirements`) for your specific OS and install any missing dependencies. Also, check your OS notification settings for the terminal or IDE running webpack.","cause":"The underlying `node-notifier` package might require specific system tools that are not installed on the user's OS, or system notification settings are preventing display.","error":"Notifications are not showing up on [OS Name]"}],"ecosystem":"npm"}