Gatsby: WebpackError: Invariant Violation during build

[LHack47]

Description

Howdy folks! Getting this error only during the build. Wanted to see if I could get some eyes on it.

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

8 | else
9 | root["lib"] = factory(root["@reach/router"], root["common-tags"], root["core-js/library/fn/array/from"], root["core-js/library/fn/array/is-array"], root["core-js/library/fn/object/assign"], root["core-js/library/fn/object/create"], root["core-js/library/fn/object/entries"], root["core-js/library/fn/object/keys"], root["core-js/library/fn/object/values"], root["core-js/library/fn/parse-int"], root["core-js/modules/es6.array.sort"], root["fs"], root["lodash"], root["minimatch"], root["path"], root["react"], root["react-dom/server"], root["react-helmet"]);

10 | })(this, function(__WEBPACK_EXTERNAL_MODULE__reach_router__, __WEBPACK_EXTERNAL_MODULE_common_tags__, __WEBPACK_EXTERNAL_MODULE_core_js_library_fn_array_from__, __WEBPACK_EXTERNAL_MODULE_core_js_library_fn_array_is_array__, __WEBPACK_EXTERNAL_MODULE_core_js_library_fn_object_assign__, __WEBPACK_EXTERNAL_MODULE_core_js_library_fn_object_create__, __WEBPACK_EXTERNAL_MODULE_core_js_library_fn_object_entries__, __WEBPACK_EXTERNAL_MODULE_core_js_library_fn_object_keys__, __WEBPACK_EXTERNAL_MODULE_core_js_library_fn_object_values__, __WEBPACK_EXTERNAL_MODULE_core_js_library_fn_parse_int__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_sort__, __WEBPACK_EXTERNAL_MODULE_fs__, __WEBPACK_EXTERNAL_MODULE_lodash__, __WEBPACK_EXTERNAL_MODULE_minimatch__, __WEBPACK_EXTERNAL_MODULE_path__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom_server__, __WEBPACK_EXTERNAL_MODULE_react_helmet__) {
| ^
11 | return

WebpackError: Invariant Violation: Minified React error #130; visit https://rea ctjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the fu ll message or use the non-minified dev environment for full errors and addition al helpful warnings.

• universalModuleDefinition:10 ba
  lib/webpack/universalModuleDefinition:10:2

• bootstrap:26 a.render
  lib/webpack/bootstrap:26:1

• static-entry.js:188 Module../.cache/static-entry.js.__webpack_exports__.defau lt.React.Component [as default]
  lib/.cache/static-entry.js:188:18

• bootstrap:24 Promise
  lib/webpack/bootstrap:24:1

• gatsby-browser-entry.js:10 Promise._resolveFromExecutor
  lib/.cache/gatsby-browser-entry.js:10:1

• bootstrap:68 new Promise
  lib/webpack/bootstrap:68:1

• bootstrap:5 tryCatcher
  lib/webpack/bootstrap:5:1

• bootstrap:50 MappingPromiseArray._promiseFulfilled
  lib/webpack/bootstrap:50:1

• api-runner-ssr.js:6 MappingPromiseArray.PromiseArray._iterate
  lib/.cache/api-runner-ssr.js:6:16

• bootstrap:67 MappingPromiseArray.init
  lib/webpack/bootstrap:67:1

• bootstrap:19 MappingPromiseArray._asyncInit
  lib/webpack/bootstrap:19:1

[andykais]

I had a similar error occur in my build. I tracked down the error to occur when any file exists in pages that has a export default [] or anything that is not a react element. It seems like gatsby just tries to build any and all files it finds inside pages as react components. If it is possible to tell gatsby to only render in pages these files: pages/index.js and pages/*/index.js, or to filter out certain files about to be rendered, I can solve my error. My structure in pages looks like this

pages/
  page-2/
    index.js
    data.js // non react file exporting an array of strings
  home/
    index.js
    data.js // same non react file structure

[kakadiadarpan]

@LHack47 can you provide a reproduction repo for this? That would make it much easier to diagnose this issue.

Also, can you share the relevant environment information by running, gatsby info --clipboard?

[LHack47]

Binaries:
Node: 8.11.3 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Browsers:
Chrome: 69.0.3497.100
Safari: 11.1
npmPackages:
gatsby: ^2.0.6 => 2.0.6
gatsby-link: ^2.0.1 => 2.0.1
gatsby-plugin-debug-build: ^1.0.0 => 1.0.0
gatsby-plugin-eslint: ^2.0.1 => 2.0.1
gatsby-plugin-favicon: ^3.1.4 => 3.1.4
gatsby-plugin-google-analytics: ^2.0.6 => 2.0.6
gatsby-plugin-google-tagmanager: ^2.0.5 => 2.0.5
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
gatsby-plugin-typography: ^2.2.0 => 2.2.0
npmGlobalPackages:
gatsby-cli: 1.1.58

[yiochen]

I had the same issue when I upgraded to the newest beta version of Gatsby.
I had a json file in my pages/ folder.
Then I check the link in the build log. The documentation makes it very clear why it failed

Check that each of your JS files listed in your pages directory (and any sub-directories) are exporting either a React component or string. Gatsby treats any JS file listed under the pages dir as a page component, so it must have a default export that’s a component or string.

Just as what @andykais said.

[kakadiadarpan]

@LHack47 any updates on the suggestion provided by @andykais?

[holyjak]

I run into the same error but for a different reason - my page included both import and require, which Webpack 4 in Gatsby 2 does not like. Using only imports fixed it.

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍

[schwiet]

@LHack47 did you figure out what your issue was? I am seeing this same error now (only on build, no issues during dev) and I've confirmed I'm not exporting any non-components as the default from any .js files in /pages (no requires either as the documentation suggested). I'm stumped, atm...

UPDATE: for me it turned out to be passing an upper-case Component (e.g.<SomeComponent>) as a prop, instead of making the prop a function.