Gatsby: WebpackError: Invariant Violation: Minified React error #62

Created on 26 Jan 2019  ·  1Comment  ·  Source: gatsbyjs/gatsby

Summary

Gatsby build throws WebpackError: Invariant Violation: Minified React error #62 error, gatsby develop works without problems though even tough gatsby develop works fine.

Relevant information

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://gatsby.app/debug-html

   8 |  else
   9 |          root["lib"] = factory(root["@reach/router"], root["core-js/modules/es6.array.iterator"], root["core-js/modules/es6.array.sort"], root["core-js/modules/es6.function.name"], root["core-js/modules/es6.map"], root["core-js/modules/es6.object.assign"], root["core-js/modules/es6.regexp.constructor"], root["core-js/modules/es6.regexp.split"], root["core-js/modules/es6.regexp.to-string"], root["core-js/modules/es6.string.ends-with"], root["core-js/modules/es6.string.iterator"], root["core-js/modules/web.dom.iterable"], root["fs"], root["lodash"], root["path"], root["react"], root["react-dom/server"], root["react-helmet"]);
> 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE__reach_router__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_sort__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_function_name__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_map__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_assign__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_constructor__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_split__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_to_string__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_ends_with__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_web_dom_iterable__, __WEBPACK_EXTERNAL_MODULE_fs__, __WEBPACK_EXTERNAL_MODULE_lodash__, __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 #62; visit https://reactjs.org/docs/error-decoder.html?invariant=62&args[]= for the full message  or use the non-minified dev environment for full errors and additional helpful warnings.

This is the full error message I'm getting. I've tried eliminating every wrong mapping of style properties like described in the full React error message but the problem still persists. I've also deleted .cache.

I don't know what else could be the problem since I could do a successful build earlier and the message doesn't provide any more insights on what could be wrong with my code, especially since I can perfectly run it with gatsby develop.

Environment (if relevant)

```
System:
OS: macOS 10.14.2
CPU: (8) x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.7.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 71.0.3578.98
Safari: 12.0.2
npmPackages:
gatsby: ^2.0.76 => 2.0.76
gatsby-image: ^2.0.20 => 2.0.25
gatsby-plugin-manifest: ^2.0.9 => 2.0.12
gatsby-plugin-offline: ^2.0.16 => 2.0.20
gatsby-plugin-react-helmet: ^3.0.2 => 3.0.5
gatsby-plugin-sharp: ^2.0.14 => 2.0.16
gatsby-source-filesystem: ^2.0.8 => 2.0.12
gatsby-transformer-sharp: ^2.1.8 => 2.1.9

### File contents (if changed)

`gatsby-config.js`:<!-- Please use a code block or just leave it as is if wasn't changed -->

module.exports = {
siteMetadata: {
title: Gatsby Starter,
description: Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.,
author: @gatsbyjs,
socialLinks: [
{
name: Link 1,
url: https://twitter.com/,
},
{
name: link 2,
url: https://github.com/,
}
],
features: [
{
title: Feature 1,
description: Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.,
},
{
title: Feature 2,
description: Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.,
},
{
title: Feature 3,
description: Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.,
},
],
},
plugins: [
gatsby-plugin-react-helmet,
{
resolve: gatsby-source-filesystem,
options: {
name: images,
path: ${__dirname}/src/images,
},
},
gatsby-transformer-sharp,
gatsby-plugin-sharp,
{
resolve: gatsby-plugin-manifest,
options: {
name: gatsby-starter-default,
short_name: starter,
start_url: /,
background_color: #663399,
theme_color: #663399,
display: minimal-ui,
icon: src/images/gatsby-icon.png, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.app/offline
// 'gatsby-plugin-offline',
],
}

`package.json`:<!-- Please use a code block or just leave it as is if wasn't changed -->

{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews mathews.kyle@gmail.com",
"dependencies": {
"gatsby": "^2.0.76",
"gatsby-image": "^2.0.20",
"gatsby-plugin-manifest": "^2.0.9",
"gatsby-plugin-offline": "^2.0.16",
"gatsby-plugin-react-helmet": "^3.0.2",
"gatsby-plugin-sharp": "^2.0.14",
"gatsby-source-filesystem": "^2.0.8",
"gatsby-transformer-sharp": "^2.1.8",
"prop-types": "^15.6.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-helmet": "^5.2.0"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"start": "npm run develop",
"format": "prettier --write \"src/*/.js\"",
"test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
},
"devDependencies": {
"prettier": "^1.15.2"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
`` gatsby-node.js: N/A <!-- Please use a code block or just leave it as is if wasn't changed --> gatsby-browser.js: N/A <!-- Please use a code block or just leave it as is if wasn't changed --> gatsby-ssr.js`: N/A

Most helpful comment

~@AlexanderProd I'm running into the same issue; what was the cause of yours?~

Nevermind, in my case, I was using

bodyAttributes={{
  style: 'some style string'
}}

inside the auto-generated SEO.js's <Helmet /> instance. Using a style object wasn't working, which I'd imagine is a problem with react-helmet. Converting my style to a class and using that instead solved my problem.

For other people arriving by Google, the error is an incorrect style invocation (ie, don't use strings, use objects).

>All comments

~@AlexanderProd I'm running into the same issue; what was the cause of yours?~

Nevermind, in my case, I was using

bodyAttributes={{
  style: 'some style string'
}}

inside the auto-generated SEO.js's <Helmet /> instance. Using a style object wasn't working, which I'd imagine is a problem with react-helmet. Converting my style to a class and using that instead solved my problem.

For other people arriving by Google, the error is an incorrect style invocation (ie, don't use strings, use objects).

Was this page helpful?
0 / 5 - 0 ratings

Related issues

KyleAMathews picture KyleAMathews  ·  3Comments

Oppenheimer1 picture Oppenheimer1  ·  3Comments

kalinchernev picture kalinchernev  ·  3Comments

rossPatton picture rossPatton  ·  3Comments

brandonmp picture brandonmp  ·  3Comments