Show javascript errors in overlay

[KyleAMathews]

create-react-app and next.js have this and it's super cool and useful. You know right away when something is wrong instead of having to keep glancing at your terminal or browser console.

Also next.js adds syntax highlighting to the error which is nifty.

vercel/next.js#195

[KyleAMathews]

facebook/create-react-app#1101 (comment)

[vinnymac]

For those who aren't familiar, redbox-react is usually used to do this. Looks like the create-react-app folks are trying to push the feature into the future though.

[jthegedus]

Re: create-react-app the webpack-dev-server@2.3.0 webpack/webpack-dev-server@d725fd9 added some support for the CRA implementation of overlays. Discussed by the CRA team here

[KyleAMathews]

PR adding this to another project react-cosmos/react-cosmos#484

[Timer]

If anyone takes this on don't hesitate to ask me questions, I could also give it a stab if someone points me in the right direction (where it'd need wired into).

[KyleAMathews]

Oh sweet! Thanks for hopping in and offering to help! Would love to get this in soon. First question though is does the overlay work with webpack 1 still? That's where we are still unfortunately.

This is the entry file for development https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/root.js

[Timer]

Depends on what angle you're asking that question -- our webpack middleware might work with webpack 1, but we know it works on webpack 3.

As for the overlay itself (just importing): currently, no -- we only ship an ESM version of the overlay (you could put it through babel).
The next version (should) include a CJS version which can be consumed by webpack 1 easily.

The overlay itself does not depend on anything webpack, its a completely separate package with 0 dependencies -- we just have to decide on the integration points.

[KyleAMathews]

What does the integration point need to be? Where in the app is it?

[Timer]

The overlay simply needs to be required in the applications source, preferably as an entry point.

The "integration" points I was speaking of pertain to the click-to-open source / build errors; you can use our webpack development server or add the necessary hooks to enable those features in your server (none of which are necessary for the overlay to work).

[KyleAMathews]

Oh sweet — sounds fairly straightforward then.

Would love a PR adding the overlay to https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/root.js

We use webpack-dev-middleware — is the click-to-open / build errors compatible with that?

gatsby/packages/gatsby/src/commands/develop.js

Line 91 in 9ff1401

require(`webpack-dev-middleware`)(compiler, {

Happy to take suggestions for alternative setups if they're more compatible.

[Timer]

#2783

[KyleAMathews]

This is shipped! Thanks again @Timer!