WebpackError: Invariant Violation: Minified React error #62

[AlexanderProd]

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:

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:

{
  "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
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[sllvn]

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