{"_id":"@kocal/friendly-errors-webpack-plugin","name":"@kocal/friendly-errors-webpack-plugin","dist-tags":{"latest":"3.0.0"},"versions":{"3.0.0":{"name":"@kocal/friendly-errors-webpack-plugin","publishConfig":{"access":"public"},"version":"3.0.0","description":"Recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience","main":"index.js","types":"index.d.ts","keywords":["friendly","errors","webpack","plugin"],"author":{"name":"Geoffroy Warin"},"maintainers":[{"name":"kocal","email":"hugo@alliau.me"}],"repository":{"type":"git","url":"git+https://github.com/kocal/friendly-errors-webpack-plugin.git"},"bugs":{"url":"https://github.com/kocal/friendly-errors-webpack-plugin/issues"},"license":"MIT","peerDependencies":{"webpack":"^5.0.0"},"devDependencies":{"@babel/core":"^7.29.0","@babel/preset-react":"^7.28.0","@eslint/js":"^9.0.0","babel-loader":"^10.0.0","eslint":"^9.39.0","eslint-webpack-plugin":"^5.0.3","globals":"^16.0.0","memfs":"^4.17.0","vitest":"^4.0.18","webpack":"^5.105.0"},"dependencies":{"consola":"^3.2.3","error-stack-parser":"^2.1.4","picocolors":"^1.1.1","string-width":"^4.2.3"},"engines":{"node":"^22.13.0 || >=24.0.0"},"scripts":{"lint":"eslint .","lint:fix":"eslint . --fix","test":"eslint . && vitest run"},"_id":"@kocal/friendly-errors-webpack-plugin@3.0.0","homepage":"https://github.com/kocal/friendly-errors-webpack-plugin#readme","_integrity":"sha512-ELJuHiZIFlynsi+hRmxZYZHrN3nF+j4wXRaIgVGVGy/oMtvm0Fmv8n+ZSWurFkWZ+wH/SV3grE+WhNP2MbfypA==","_resolved":"/private/var/folders/7b/gbj2qwms0rg4403qykr8yl6c0000gn/T/8cd38af708d3e720f0c77f7b0caae163/kocal-friendly-errors-webpack-plugin-3.0.0.tgz","_from":"file:kocal-friendly-errors-webpack-plugin-3.0.0.tgz","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-ELJuHiZIFlynsi+hRmxZYZHrN3nF+j4wXRaIgVGVGy/oMtvm0Fmv8n+ZSWurFkWZ+wH/SV3grE+WhNP2MbfypA==","shasum":"834b6a181194830200eeed848c6b92fcbc927392","tarball":"https://registry.npmjs.org/@kocal/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-3.0.0.tgz","fileCount":20,"unpackedSize":31069,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAoAlF94Bpz/dmfwiZpopDExFar535leqYDAgYCwRNhpAiAyV+ebam1dW8XvooIZag2fQhFFWKElLkhUkkNR6hPYdw=="}]},"_npmUser":{"name":"kocal","email":"hugo@alliau.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/friendly-errors-webpack-plugin_3.0.0_1773180540464_0.48906887303264446"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-10T22:09:00.400Z","3.0.0":"2026-03-10T22:09:00.607Z","modified":"2026-03-10T22:09:00.872Z"},"maintainers":[{"name":"kocal","email":"hugo@alliau.me"}],"description":"Recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience","homepage":"https://github.com/kocal/friendly-errors-webpack-plugin#readme","keywords":["friendly","errors","webpack","plugin"],"repository":{"type":"git","url":"git+https://github.com/kocal/friendly-errors-webpack-plugin.git"},"author":{"name":"Geoffroy Warin"},"bugs":{"url":"https://github.com/kocal/friendly-errors-webpack-plugin/issues"},"license":"MIT","readme":"# Friendly-errors-webpack-plugin\n\n> [!NOTE]\n> This repository is a fork of [@nuxt/friendly-errors-webpack-plugin](https://github.com/nuxt/friendly-errors-webpack-plugin), which is no longer maintained. \n> The goal of this fork is to continue the maintenance of the plugin, ensuring it remains up-to-date and compatible with the latest versions of Webpack and related tools.\n\n[![npm](https://img.shields.io/npm/v/@kocal/friendly-errors-webpack-plugin.svg)](https://www.npmjs.com/package/@kocal/friendly-errors-webpack-plugin)\n[![CI](https://github.com/Kocal/friendly-errors-webpack-plugin/actions/workflows/ci.yml/badge.svg)](https://github.com/Kocal/friendly-errors-webpack-plugin/actions/workflows/ci.yml)\n\nFriendly-errors-webpack-plugin recognizes certain classes of webpack\nerrors and cleans, aggregates and prioritizes them to provide a better\nDeveloper Experience.\n\nIt is easy to add types of errors so if you would like to see more\nerrors get handled, please open a [PR](https://help.github.com/articles/creating-a-pull-request/)!\n\n## Getting started\n\n### Installation\n\n```bash\nnpm install @kocal/friendly-errors-webpack-plugin --save-dev\n```\n\n### Basic usage\n\nSimply add `FriendlyErrorsWebpackPlugin` to the plugin section in your Webpack config.\n\n```javascript\nvar FriendlyErrorsWebpackPlugin = require('@kocal/friendly-errors-webpack-plugin');\n\nvar webpackConfig = {\n  // ...\n  plugins: [\n    new FriendlyErrorsWebpackPlugin(),\n  ],\n  // ...\n}\n```\n\n### Turn off errors\n\nYou need to turn off all error logging by setting your webpack config quiet option to true.\n\n```javascript\napp.use(require('webpack-dev-middleware')(compiler, {\n  // ...\n  logLevel: 'silent',\n  // ...\n}));\n```\n\nIf you use the webpack-dev-server, there is a setting in webpack's ```devServer``` options:\n\n```javascript\n// webpack config root\n{\n  // ...\n  devServer: {\n    // ...\n    client: {\n      logging: 'none',\n    },\n    // ...\n  },\n  // ...\n}\n```\n\nIf you use webpack-hot-middleware, that is done by setting the log option to `false`. You can do something sort of like this, depending upon your setup:\n\n```javascript\napp.use(require('webpack-hot-middleware')(compiler, {\n  log: false\n}));\n```\n\n_Thanks to [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard) for this piece of info._\n\n## Demo\n\n### Build success\n\n![success](http://i.imgur.com/MkUEhYz.gif)\n\n### eslint-webpack-plugin errors\n\n![lint](http://i.imgur.com/xYRkldr.gif)\n\n### babel-loader syntax errors\n\n![babel](http://i.imgur.com/W59z8WF.gif)\n\n### Module not found\n\n![babel](http://i.imgur.com/OivW4As.gif)\n\n## Options\n\nYou can pass options to the plugin:\n\n```js\nnew FriendlyErrorsPlugin({\n  compilationSuccessInfo: {\n    messages: ['You application is running here http://localhost:3000'],\n    notes: ['Some additional notes to be displayed upon successful compilation']\n  },\n  onErrors: function (severity, errors) {\n    // You can listen to errors transformed and prioritized by the plugin\n    // severity can be 'error' or 'warn'\n  },\n  // should the console be cleared between each compilation?\n  // default is true\n  clearConsole: true,\n\n  // INFO:    all logs\n  // WARNING: warnings and errors\n  // ERROR:   only errors\n  // SILENT:  no log\n  logLevel: 'INFO',\n\n  // base: default\n  // consola: consola adapter\n  // can also be npm package name or reporter object\n  reporter: 'consola'\n\n  // add formatters and transformers (see below)\n  additionalFormatters: [],\n  additionalTransformers: []\n})\n```\n\n## Adding desktop notifications\n\nThe plugin has no native support for desktop notifications but it is easy\nto add them thanks to [node-notifier](https://www.npmjs.com/package/node-notifier) for instance.\n\n```js\nvar FriendlyErrorsWebpackPlugin = require('@kocal/friendly-errors-webpack-plugin');\nvar notifier = require('node-notifier');\nvar ICON = path.join(__dirname, 'icon.png');\n\nnew FriendlyErrorsWebpackPlugin({\n    onErrors: (severity, errors) => {\n      if (severity !== 'error') {\n        return;\n      }\n      const error = errors[0];\n      notifier.notify({\n        title: \"Webpack error\",\n        message: severity + ': ' + error.name,\n        subtitle: error.file || '',\n        icon: ICON\n      });\n    }\n  })\n]\n```\n\n## API\n\n### Transformers and formatters\n\nWebpack's errors processing, is done in four phases:\n\n1. Extract relevant info from webpack errors. This is done by the plugin [here](https://github.com/kocal/friendly-errors-webpack-plugin/blob/master/src/core/extractWebpackError.js)\n2. Apply transformers to all errors to identify and annotate well know errors and give them a priority\n3. Get only top priority error or top priority warnings if no errors are thrown\n4. Apply formatters to all annotated errors\n\nYou can add transformers and formatters. Please see [transformErrors](https://github.com/kocal/friendly-errors-webpack-plugin/blob/master/src/core/transformErrors.js),\nand [formatErrors](https://github.com/kocal/friendly-errors-webpack-plugin/blob/master/src/core/formatErrors.js)\nin the source code and take a look a the [default transformers](https://github.com/kocal/friendly-errors-webpack-plugin/tree/master/src/transformers)\nand the [default formatters](https://github.com/kocal/friendly-errors-webpack-plugin/tree/master/src/formatters).\n\n### Customize Reporters\n\nReporter is a class for generating output of errors messages, structure is:\n\n1. Include following levels log methods: `success`, `info`, `note`, `warn`, `error`.\n1. Include method `clearConsole` for clearing the terminal console.\n\nYou can take a look at source code as example [base reporter](https://github.com/kocal/friendly-errors-webpack-plugin/blob/master/src/reporters/base.js)\n","readmeFilename":"README.md","_rev":"1-45f3df00ba03c7f95934c78be63247ef"}