Building Static HTML - WebpackError: Invariant Violation: Minified React error #152

Question

During build on building static HTML get error:

8 |  else
9 |          root["lib"] = factory(root["@reach/router"], root["core- 
js/modules/es6.array.sort"], 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_sort__, 
__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 #152; visit 
https://reactjs.org/docs/error-decoder.html? 
invariant=152&args[]=Component for the f  ull message or use the non- 
minified dev environment for full errors and additional helpful 
warnings.

Although the message is kind of cryptic. (doesn't say in which component it fails), it seems the problem should reside in react-helmet at first.

Tried to update versions of react-helmet and react-plugin-helmet. Didn't work. Erased all the traces of react-helmet and the error was gone, but appeared a similar error with lodash ( Invariant Violation: Minified React error #152) right after that. Lodash is only referenced in package-lock.json. Tried install in package.json lodash and gatsby-plugin lodash with no success.

In develop mode, as expected, everything works.

I checked every component return before. I went even further, abandoned implicit return and made all returns in React explicit.

Still no work

build problems don't disappear with downgrading node or updating gatsby and react to latest versions.

Here's the repo

https://github.com/pedrotavaresgoncalves/gatsby-debug

Environment:

System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: v10.13.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 70.0.3538.77
Firefox: 60.0.2
Safari: 12.0
npmPackages:
gatsby: 2.0.19 => 2.0.19
gatsby-image: ^2.0.19 => 2.0.19
gatsby-plugin-lodash: ^3.0.2 => 3.0.2
gatsby-plugin-manifest: 2.0.2 => 2.0.2
gatsby-plugin-offline: 2.0.5 => 2.0.5
gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1
gatsby-plugin-sass: 2.0.1 => 2.0.1
gatsby-plugin-sharp: 2.0.6 => 2.0.6
gatsby-plugin-typography: ^2.2.0 => 2.2.0
gatsby-source-filesystem: 2.0.1 => 2.0.1
gatsby-transformer-json: 2.1.2 => 2.1.2
gatsby-transformer-remark: 2.1.3 => 2.1.3
gatsby-transformer-sharp: 2.1.3 => 2.1.3
npmGlobalPackages:
gatsby-cli: 2.4.4

"In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire. We highly recommend using the development build locally (...)" - https://reactjs.org/docs/error-decoder.html/?%20invariant=152&args[]=Component — messerbill, Nov 07 '18 at 15:41
By the way, [it is safe to leave your firebase config values in your public repository](https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public). They can be seen by users using your app anyway. — talves, Nov 08 '18 at 00:51
yeah @talves you are right (slipped my mind completely). Changed the permissions in firebase and added the credentials for you to take a look. You can check out the repo now. Thank you in advance. — Pedro Gonçalves, Nov 08 '18 at 19:18
Hello @[Pedro Gonçalves](https://stackoverflow.com/users/10618202/pedro-gon%c3%a7alves) , Although the issue below is one of the culprits for the error you see. I think there are some others that may cause the error. Filtering by `relativeDirectory` is going to be unstable from another OS like windows. BTW, I like this way of handling locale. — talves, Nov 08 '18 at 21:27
Thanks @talves indeed you answer was right. This way of handling locale I got the idea from a nice post https://blog.significa.pt/i18n-with-gatsby-528607b4da81. Got to give credit where credit is due :) I enjoyed the approach of not having more external libraries to implement the functionality — Pedro Gonçalves, Nov 08 '18 at 23:41

talves · Accepted Answer · 2018-11-08T21:19:33.317

When you follow the production build error you get:

Usually caused by a component or page issue causing the component to return null or nothing. In the code below, I commented out the check for window because it will not return anything when building the static content.

In this template, you checked for window and caused the error above.

import React from 'react';
import Layout from '../components/layout';
import {graphql} from 'gatsby';

export default ({pageContext: {locale, folderName}, data}) => {
  // if (typeof window !== `undefined`) {
    const fileFrontmatter = data.file.childMarkdownRemark.frontmatter;

    return (
      <Layout path="/" locale={locale}>
        <div>{fileFrontmatter.title}</div>
      </Layout>
    );
  // }
};

export const query = graphql`
  query Template($locale: String, $folderName: String) {
    file(name: { eq: $locale }, relativeDirectory: { eq: $folderName }) {
      childMarkdownRemark{
        frontmatter{
          title
        }
      }
    }
  }
`;

I took those credentials out because they are private . That is common practice when sharing code with firebase credentials. You just have to fill those with a firebase test account. Even with credentials project doesn't build. — Pedro Gonçalves, Nov 07 '18 at 20:56

Building Static HTML - WebpackError: Invariant Violation: Minified React error #152

1 Answers1