Gatsby: Build: WebpackError: Invariant Violation: Minified React error #130

[kilinkis]

Description

I'm using react-desktop, which relies on the _window_ global. The component works just fine in develop, but fails while building.
Apparently, this is caused because there is no _window_ defined during the compilation process, since it's a terminal environment.
As explained here in the docs, you can cheat webpack to not check this module. So I added the following code to gatsby-node.js:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-desktop/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

after this, the error about _window_ not being defined went away, but now I get:

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["core-js/modules/es6.array.sort"], root["crypto"], 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_crypto__, __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 #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&arg  s[]= for the full message or use the non-minified dev environment for full errors and additional 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__.default.React.Component [as default]
    lib/.cache/static-entry.js:188:18

  - bootstrap:24 Promise
    lib/webpack/bootstrap:24: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:8 MappingPromiseArray.PromiseArray._iterate
    lib/.cache/api-runner-ssr.js:8:1

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

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

I went through a ton of links but nothing helped.

Steps to reproduce

npm install
gatsby build

Any ideas what's going on?
Thank you in advance

Expected result

The project builds

Actual result

The build fails

Environment

This is a NetlifyCMS gatsby starter

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 9.3.0 - /usr/local/bin/node
npm: 6.3.0 - /usr/local/bin/npm
Browsers:
Chrome: 69.0.3497.100
Safari: 12.0
npmPackages:
gatsby: ^2.0.0 => 2.0.7
gatsby-image: ^2.0.13 => 2.0.13
gatsby-plugin-netlify: ^2.0.0 => 2.0.0
gatsby-plugin-netlify-cms: ^3.0.0 => 3.0.2
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
gatsby-plugin-sass: ^2.0.1 => 2.0.1
gatsby-plugin-sharp: ^2.0.5 => 2.0.5
gatsby-remark-images: ^2.0.1 => 2.0.1
gatsby-source-filesystem: ^2.0.1 => 2.0.1
gatsby-transformer-remark: ^2.1.1 => 2.1.3
gatsby-transformer-sharp: ^2.1.1 => 2.1.1
npmGlobalPackages:
gatsby-cli: 2.4.1

[pieh]

after using null-loader, when you are importing from react-desktop you will get null - so if you use that import without checking if it's set - this will cause troubles. It only happens during the build, because we don't build static html for develop.

[kilinkis]

hi @pieh, thanks for your answer. But it's still not very clear for me. Sorry, I'm a beginner.

here is my page template (where the error happens):

import React from "react";
import PropTypes from "prop-types";
import { graphql } from "gatsby";
import Layout from "../components/Layout";
import Content, { HTMLContent } from "../components/Content";
//import Img from "gatsby-image";
import { Window, TitleBar } from "react-desktop/macOs";
import Typist from "react-typist";

export const BioPageTemplate = ({
  title,
  content,
  contentComponent,
  image
}) => {
  const PageContent = contentComponent || Content;

  return (
    <section className="section section--gradient">

            if (Window != null)
            {
              <Window
                chrome
                height="500px"
                width="100%"
                background="#000"
                className="window"
                padding="0"
              >
                <TitleBar title="website" controls />
                <Typist>{content}</Typist>
              </Window>
            }


    </section>
  );
};

BioPageTemplate.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string,
  contentComponent: PropTypes.func
};

const BioPage = ({ data }) => {
  const { markdownRemark: post } = data;


  return (
    <Layout>
      <BioPageTemplate
        contentComponent={HTMLContent}
        title={post.frontmatter.title}
        content={post.html}
        image={data.file}
      />
    </Layout>
  );
};

BioPage.propTypes = {
  data: PropTypes.object.isRequired
};

export default BioPage;

export const bioPageQuery = graphql`
  query BioPage($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        title
      }
    }
  }
`;

this is where the problem happens, if I remove this, it compiles just fine:

<Window
    chrome
    height="500px"
    width="100%"
    background="#000"
    className="window"
    padding="0"
    >
    <TitleBar title="website" controls />
    <Typist>{content}</Typist>
</Window>

I wrapped that in an if statement (that's what I understood from you answer), but the issue persists.
I think I probably got it wrong, but hopefully this code helps to explain my issue a little better.

[Kosai106]

I'm getting a similar issue.

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["core-js/modules/es6.array.sort"], root["crypto"], root["fs"], root["lodash"], root["lodash/cloneDeep"], root["lodash/isEqual"], 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_crypto__, __WEBPACK_EXTERNAL_MODULE_fs__, __WEBPACK_EXTERNAL_MODULE_lodash__, __WEBPACK_EXTERNAL_MODULE_lodash_cloneDeep__, __WEBPACK_EXTERNAL_MODULE_lodash_isEqual__, __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://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Edit:// Thanks to @Haroenv I've fixed my issue. It was because I was referencing a component that didn't exist/wasn't imported.

[franz-see]

Im also experiencing this. I have a 3rd party module that uses window and that causes error in npm run build. I followed the docs (https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules) as to how to fix it.

And although the error message for window is gone, I am now experiencing this as well

success Building production JavaScript and CSS bundles — 24.559 s

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["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 #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

@pieh I dont understand your comment. Im not sure if you were just explaining why it is failing or if you're explaining how to fix it.

[pieh]

Please check https://github.com/gatsbyjs/gatsby/issues/9214#issuecomment-431073612 which is similar issue. We will be working on improving Debugging HTML Builds docs to show more concrete examples there

[franz-see]

Thanks @pieh ! That worked for me

I updated gatsby-node.js and added

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /bad-module/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

and did something like this in my component

<div>
  {typeof window !== 'undefined' && ReactMediaPlayer && <ReactMediaPlayer/>}
</div>

[jserrao]

@franz-see - can you explain that syntax and what you're doing in your component more thoroughly? That line of code doesn't make sense to me.

[Haroenv]

@jserrao, React Media Player is a component which uses things that are available in the browser, but not in node (eg. document, window ...). Since we want to avoid that component to render at all in node (prerendering) and leave an empty div, we do this:

<div>
  { // JS interpolation
    typeof window !== 'undefined'
      // if window does not exist (its type undefined),
      // we stop here (since this will be `false` and render nothing)
      && ReactMediaPlayer
      // ReactMediaPlayer also can be undefined (because of the special loader for html)
      // we don't want that to render either, so we will add a condition
      // if it's undefined, it's falsy so it renders `undefined` (nothing)
      && <ReactMediaPlayer/>
      // finally if the two earlier conditions are truthy, let's render!
  }
</div>

[jserrao]

@Haroenv - thanks, very helpful for a generic, basic use case. Mine is far more complex. I'm working through it and will post once I figure it out. Solution posted

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!