Handle undefined webpack build error

[iv-mexx]

I ran into this problem when gatsby build failed with

TypeError: Cannot read property 'chunk' of undefined

/Users///node_modules/gatsby/node_modules/webpack/lib/Stats.js:93
if(e.chunk) {
^

TypeError: Cannot read property 'chunk' of undefined
at formatError (/Users///node_modules/gatsby/node_modules/webpack/lib/Stats.js:93:7)
at Array.map ()
at Stats.toJson (/Users///node_modules/gatsby/node_modules/webpack/lib/Stats.js:123:30)
at /Users///node_modules/gatsby/dist/utils/build-html.js:70:45
at Compiler. (/Users///node_modules/gatsby/node_modules/webpack/lib/Compiler.js:194:14)
at Compiler.emitRecords (/Users///node_modules/gatsby/node_modules/webpack/lib/Compiler.js:282:37)
at Compiler. (/Users///node_modules/gatsby/node_modules/webpack/lib/Compiler.js:187:11)
at /Users///node_modules/gatsby/node_modules/webpack/lib/Compiler.js:275:11
at Compiler.applyPluginsAsync (/Users///node_modules/gatsby/node_modules/tapable/lib/Tapable.js:60:69)
at Compiler.afterEmit (/Users///node_modules/gatsby/node_modules/webpack/lib/Compiler.js:272:8)
at Compiler. (/Users///node_modules/gatsby/node_modules/webpack/lib/Compiler.js:267:14)
at /Users///node_modules/gatsby/node_modules/webpack/node_modules/async/lib/async.js:52:16
at done (/Users///node_modules/gatsby/node_modules/webpack/node_modules/async/lib/async.js:246:17)
at /Users///node_modules/gatsby/node_modules/webpack/node_modules/async/lib/async.js:44:16
at /Users///node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:136:15)

After some digging around I found that this was not the actual build error!

For some reason, stats.compilation.errors contained an undefined at first place:

stats.compilation.errors

errors:
      [ undefined,
        'FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
            at error (render-page.js:52589:22)
            at Object.initializeApp (render-page.js:52488:14)
            at new Ginfo (render-page.js:52021:19)
            at Object.createStore [as default] (render-page.js:51969:16)
            at Template (render-page.js:48337:39)
            at ReactCompositeComponentWrapper._constructComponentWithoutOwner (render-page.js:14596:15)
            at ReactCompositeComponentWrapper._constructComponent (render-page.js:14572:20)
            at ReactCompositeComponentWrapper.mountComponent (render-page.js:14475:22)
            at Object.mountComponent (render-page.js:7457:36)
            at ReactCompositeComponentWrapper.performInitialMount (render-page.js:14658:35)',
        'FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
            at error (render-page.js:52589:22)
            at Object.initializeApp (render-page.js:52488:14)
            at new Ginfo (render-page.js:52021:19)
            at Object.createStore [as default] (render-page.js:51969:16)
            at Template (render-page.js:48337:39)
            at ReactCompositeComponentWrapper._constructComponentWithoutOwner (render-page.js:14596:15)
            at ReactCompositeComponentWrapper._constructComponent (render-page.js:14572:20)
            at ReactCompositeComponentWrapper.mountComponent (render-page.js:14475:22)
            at Object.mountComponent (render-page.js:7457:36)
            at ReactCompositeComponentWrapper.performInitialMount (render-page.js:14658:35)',
        'FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
            at error (render-page.js:52589:22)
            at Object.initializeApp (render-page.js:52488:14)
            at new Ginfo (render-page.js:52021:19)
            at Object.createStore [as default] (render-page.js:51969:16)
            at Template (render-page.js:48337:39)
            at ReactCompositeComponentWrapper._constructComponentWithoutOwner (render-page.js:14596:15)
            at ReactCompositeComponentWrapper._constructComponent (render-page.js:14572:20)
            at ReactCompositeComponentWrapper.mountComponent (render-page.js:14475:22)
            at Object.mountComponent (render-page.js:7457:36)
            at ReactCompositeComponentWrapper.performInitialMount (render-page.js:14658:35)',
        'FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
            at error (render-page.js:52589:22)
            at Object.initializeApp (render-page.js:52488:14)
            at new Ginfo (render-page.js:52021:19)
            at Object.createStore [as default] (render-page.js:51969:16)
            at Template (render-page.js:48337:39)
            at ReactCompositeComponentWrapper._constructComponentWithoutOwner (render-page.js:14596:15)
            at ReactCompositeComponentWrapper._constructComponent (render-page.js:14572:20)
            at ReactCompositeComponentWrapper.mountComponent (render-page.js:14475:22)
            at Object.mountComponent (render-page.js:7457:36)
            at ReactCompositeComponentWrapper.performInitialMount (render-page.js:14658:35)' ],

(Not sure where this undefined is coming from and it might still bite my ass when I fix the other errors later).

This undefined caused the TypeError: Cannot read property 'chunk' of undefined error when calling stats.toJson and because of that, my actual errors were swallowed, leaving me scratching my head.

This proposed change filters out undefined from stats.compilation.errors before handing the first error to the rejection.
I'm not sure why toJson() is/was necessary at all since it works right now without.

[KyleAMathews]

Huh, seems right @jquense, look good? I'm not super familiar with this stuff.

Here's a good breakdown of the differences https://stackoverflow.com/questions/40201468/what-constitutes-a-build-error-vs-stats-compilation-errors-or-stats-compilation

Looks like we should print both of them out if they exist?

[KyleAMathews]

@iv-mexx could you modify your PR to print out both errors?

[iv-mexx]

@KyleAMathews I'm not sure what you mean with "both errors".

If I understand correctly, the Stackoverflow question you linked talks about the difference between the error returned from webpack in the callback and the error contained in stats.

The first one is already handled in the lines above my change (Line 29).
The second kind is what I've changed, but the stats structure itself does not seem to contain any other errors.

If you're talking about the fact, that only errors[0] is returned, that was the same before. I would change it to return all errors in the array, but I could not figure out how to return multiple errors in the rejection - any hints on that?

[jquense]

Using the stats object is the recommended approach by webpack, why not continue to use it but filter out undefined errors in the array?

[iv-mexx]

@jquense Thats what this PR is doing

[KyleAMathews]

Deploy preview failed.

Built with commit 2b224fe

https://app.netlify.com/sites/using-glamor/deploys/59e506260b79b778ae9607cf

[gatsbybot]

Deploy preview ready!

Built with commit 2b224fe

https://deploy-preview-2360--gatsbygram.netlify.com

[KyleAMathews]

Well let's give this a go then :-)