search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

WebpackError: Invariant Violation during build #8344

Closed LHack47 closed 5 years ago

LHack47 commented 6 years ago

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_MODULEreach_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.

andykais commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

holyjak commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

@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.