Use friendly-errors-webpack-plugin to display friendlier errors

[geowarin]

This delegates the black magic involved in analysing webpack errors to a thoroughly tested third party.
See https://github.com/geowarin/friendly-errors-webpack-plugin.

Demo

Success:

Module not found:

Lint warnings:

Babel error

[ghost]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at [email protected]. Thanks!

[geowarin]

😆 I've just seen the ${serverPort} message thing in the demo.
It is fixed but I'm too lazy to remake all the gifs ATM.

[ghost]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[marvinhagemeister]

Just went through the whole code and love how clean it is! After Andrew's tweet I had a go at this myself, but your plugin is way easier to read and better structured. Really awesome stuff!

[geowarin]

@marvinhagemeister Thanks! I have to mention @rogeliog who came up with the transformer/formatter idea.
The code is OK I guess but it's kind of hacky, in particular some copy-pasta from webpack here, analyse of the stack trace here and things that just work... for now.

Anyway, for the moment it's about as hacky as was @gaearon's code. All things considered, I think everybody would be happier if we didn't have to come up with a plugin for this.

[gaearon]

Thank you for the PR.

At the time when we were discussing this, I wasn’t really sure how CRA would evolve and this seemed like a good idea. However I later began to realize I want more granular control over this code. In particular, I wanted the following properties:

• User should have control over output after ejecting. It shouldn’t be all-or-nothing kind of thing.
• We also need to filter and beautify errors on the client for the syntax overlay (Add syntax error overlay in development #744).

As a result, Webpack plugin didn’t seem like the right thing to do to me, and I implemented this in a separate package called react-dev-utils in CRA monorepo. I couldn’t do this earlier because the monorepo took a while to set up (thanks @ryanyogan and @fson for their help with this).

I implemented filtering of the messages (with additional fixes) in react-dev-utils/formatWebpackMessages. In addition to existing formatting code, it also works around webpack/webpack#3008.

Please feel free to use it in your projects too! And if you could backport your tests to react-dev-utils, that would be terrific.

Sorry about the wasted effort!