{"id":13547723,"url":"https://github.com/geowarin/friendly-errors-webpack-plugin","last_synced_at":"2025-04-02T20:30:38.846Z","repository":{"id":49527805,"uuid":"65410396","full_name":"geowarin/friendly-errors-webpack-plugin","owner":"geowarin","description":"Recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience.","archived":true,"fork":false,"pushed_at":"2021-06-16T00:02:45.000Z","size":1196,"stargazers_count":749,"open_issues_count":58,"forks_count":78,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-29T11:05:59.049Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geowarin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-10T19:26:55.000Z","updated_at":"2025-03-03T15:17:34.000Z","dependencies_parsed_at":"2022-08-20T17:31:24.346Z","dependency_job_id":null,"html_url":"https://github.com/geowarin/friendly-errors-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geowarin%2Ffriendly-errors-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geowarin%2Ffriendly-errors-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geowarin%2Ffriendly-errors-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geowarin%2Ffriendly-errors-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geowarin","download_url":"https://codeload.github.com/geowarin/friendly-errors-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246887789,"owners_count":20850141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:01:00.109Z","updated_at":"2025-04-02T20:30:38.094Z","avatar_url":"https://github.com/geowarin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Friendly-errors-webpack-plugin\n\n[![npm](https://img.shields.io/npm/v/friendly-errors-webpack-plugin.svg)](https://www.npmjs.com/package/friendly-errors-webpack-plugin)\n[![Build Status](https://travis-ci.org/geowarin/friendly-errors-webpack-plugin.svg?branch=master)](https://travis-ci.org/geowarin/friendly-errors-webpack-plugin)\n[![Build status](https://ci.appveyor.com/api/projects/status/w6fovc9lttaqgx3k/branch/master?svg=true)](https://ci.appveyor.com/project/geowarin/friendly-errors-webpack-plugin/branch/master)\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 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('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    quiet: true,\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-loader 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 'warning'\n  },\n  // should the console be cleared between each compilation?\n  // default is true\n  clearConsole: true,\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 FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');\nvar notifier = require('node-notifier');\nvar ICON = path.join(__dirname, 'icon.png');\n\nnew FriendlyErrorsPlugin({\n    onErrors: (severity, errors) =\u003e {\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## 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/geowarin/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/geowarin/friendly-errors-webpack-plugin/blob/master/src/core/transformErrors.js),\nand [formatErrors](https://github.com/geowarin/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/geowarin/friendly-errors-webpack-plugin/tree/master/src/transformers)\nand the [default formatters](https://github.com/geowarin/friendly-errors-webpack-plugin/tree/master/src/formatters).\n\n## TODO\n\n- [x] Make it compatible with node 4\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeowarin%2Ffriendly-errors-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeowarin%2Ffriendly-errors-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeowarin%2Ffriendly-errors-webpack-plugin/lists"}