Gatsby - Build - WebpackError: Invariant failed

[davidmusset]

Description

Hello,

I'm having troubles building my gatsby project. Development is working fine, but when i try to build, I get an error :

ERROR #95313

Building static HTML failed for path "/Components/Layout/Footer/"

See our docs page for more info on this error: https://gatsby.dev/debug-html

   7 |
   8 |   if (isProduction) {
  9 |     throw new Error(prefix);
     | ^
  10 |   } else {
  11 |     throw new Error(prefix + ": " + (message || ''));
  12 |   }

  WebpackError: Invariant failed

  - tiny-invariant.esm.js:9 invariant
    [front-gatsby]/[tiny-invariant]/dist/tiny-invariant.esm.js:9:1

  - react-router-dom.js:172 Object.children
    [front-gatsby]/[react-router-dom]/esm/react-router-dom.js:172:132

  - static-entry.js:240 Module.../../../../../front-gatsby/.cache/static-entry.js.__webpack_exports__.default
    /front-gatsby/.cache/static-entry.js:240:18

  - api-runner-ssr.js:19 MappingPromiseArray.PromiseArray._iterate
    /front-gatsby/.cache/api-runner-ssr.js:19:1

I tried everything but I have no idea how to debug it.

Steps to reproduce

Below is my code. I have basically a static website using redux and react router dom to navigate. I had previously an error when building : "couldn't find the store" which is why I had to create both gatsby-browser and gatsby-ssr to enclose the Provider.

index.js

import React, { Component } from 'react';
import './App.css';
import Navigation from './Components/Navigation'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faStroopwafel, faStar, faCircle, faCheckCircle,faTimesCircle} from '@fortawesome/free-solid-svg-icons'
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {

  render() {

    library.add(faStroopwafel, faStar, faCircle, faCheckCircle, faTimesCircle)

    return (

      <div className="App">
        <Navigation/>
      </div>
    );
  }
}

export default App;

ReduxWrapper

import React, { Component } from 'react';
import shop from './reducers/shop.reducer'; // importation du shop
import erreur from './reducers/erreur.reducer'; // importation du erreur
import panier from './reducers/panier.reducer'; // importation du erreur
import {Provider} from 'react-redux';  // importation du provider
import createEngine from 'redux-storage-engine-localstorage';
import {createStore, combineReducers, applyMiddleware}  from 'redux'; // importation du reduceur
import * as storage from 'redux-storage'; // storage

const reducer = storage.reducer(combineReducers({shop, erreur,panier}));
const engine = createEngine('my-save-key');
const middleware = storage.createMiddleware(engine);
const createStoreWithMiddleware = applyMiddleware(middleware)(createStore);
const store = createStoreWithMiddleware(reducer);
const load = storage.createLoader(engine);

load(store);

export default ({ element }) => (
  <Provider store={store}>{element}</Provider>
);

gatsby-browser & gatsby-ssr (identicals)

export { default as wrapRootElement } from './src/pages/ReduxWrapper';

My package.json :

{
  "name": "gatsby-starter-hello-world",
  "private": true,
  "description": "",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
  },
  "dependencies": {
    "@feathersjs/feathers": "^4.3.0-pre.1",
    "@feathersjs/rest-client": "^4.3.0-pre.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.18",
    "@fortawesome/free-solid-svg-icons": "^5.8.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "bootstrap": "^4.3.1",
    "emailjs-com": "^2.4.0",
    "express": "^4.17.0",
    "express-favicon": "^2.0.1",
    "fs": "0.0.1-security",
    "gatsby": "^2.15.28",
    "gatsby-plugin-mailchimp": "^5.1.2",
    "gatsby-plugin-react-helmet": "^3.1.10",
    "gatsby-plugin-stripe": "^1.2.3",
    "react": "^16.10.1",
    "react-bootstrap": "^1.0.0-beta.10",
    "react-dom": "^16.10.1",
    "react-helmet": "^5.2.1",
    "react-redux": "^7.0.3",
    "react-responsive-carousel": "^3.1.49",
    "react-router-dom": "^5.0.0",
    "react-router-hash-link": "^1.2.1",
    "react-router-hash-link-offset": "^1.0.1",
    "react-scripts": "2.1.8",
    "react-scroll-to-component": "^1.0.2",
    "react-stripe-checkout": "^2.6.3",
    "react-stripe-elements": "^4.0.0",
    "reactstrap": "^7.1.0",
    "redux": "^4.0.1",
    "redux-storage": "^4.1.2",
    "redux-storage-engine-localstorage": "^1.1.4",
    "uuid": "^3.3.3"
  },
  "devDependencies": {
    "prettier": "^1.18.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Expected result

It should build normally

Actual result

I get an error when 'building static HTML for pages'

Environment

System: OS: Windows 10 CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz Binaries: Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.7.0 - C:\Program Files\nodejs\npm.CMD Languages: Python: 2.7.15 Browsers: Edge: 44.18362.329.0 npmPackages: gatsby: ^2.15.28 => 2.15.28 gatsby-plugin-mailchimp: ^5.1.2 => 5.1.2 gatsby-plugin-react-helmet: ^3.1.10 => 3.1.10 gatsby-plugin-stripe: ^1.2.3 => 1.2.3

Many thanks for the help

[jonniebigodes]

@davidmusset you mentioned that you're using react router dom right and i saw that you have the following in your package.json

"react-router-dom": "^5.0.0",
 "react-router-hash-link": "^1.2.1",
"react-router-hash-link-offset": "^1.0.1",

Gatsby internally uses @reach-router [https://reach.tech/router] and the issue could be with that package, but i'm speculating a bit.

If you need to need to make private routes, that are gated, you can take a look at client-only-paths and simple authentication to see how to setup. But it can be something different alltogether, if you don't mind, can you make a reproduction following these steps so that it can be looked at in more detail.

[davidmusset]

Hi @jonniebigodes , Thanks for the response

I have tried replacing router-dom by gatsby route but the error was still there.

I reproduced the code and put it on github as per your docs. See here : https://github.com/davidmusset/GatsbyArlina

Let me know if you can find something ?

Many thanks

[jonniebigodes]

@davidmusset cloning the repo as i type. I'll take a look into it and report back. Do you mind waiting a bit?

[davidmusset]

@jonniebigodes ofcourse not

Thanks for the help !

[jonniebigodes]

@davidmusset i've been through the reproduction you supplied and it seems that it needs some work so that it can work with gatsby.

I'm assuming based on the installation process i believe that you've initially setup the website with cra(create-react-app) and during that process some issues popped up, there's some vulnerabilities there as you can see below after the package installation is finished.

added 2276 packages from 1037 contributors and audited 58283 packages in 323.901s
found 64 vulnerabilities (63 low, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

I issued gatsby develop and i was able to get a development build up and running with some caveats. I'm getting the following:

> gatsby develop

success open and validate gatsby-configs - 0.033 s
success load plugins - 0.125 s
success onPreInit - 0.004 s
success initialize cache - 0.010 s
success copy gatsby files - 0.172 s
success onPreBootstrap - 0.012 s
success source and transform nodes - 0.031 s
success Add explicit types - 0.004 s
success Add inferred types - 0.076 s
success Processing types - 0.047 s
success building schema - 0.229 s
success createPages - 0.001 s
success createPagesStatefully - 0.220 s
success onPreExtractQueries - 0.003 s
success update schema - 0.028 s
success extract queries from components - 0.184 s
success write out requires - 0.027 s
success write out redirect data - 0.002 s
success onPostBootstrap - 0.002 s
⠀
info bootstrap finished - 8.691 s
⠀
success run static queries - 0.049 s — 1/1 23.14 queries/second
success run page queries - 0.136 s — 27/27 206.77 queries/second
⠧ start webpack server
(node:18720) UnhandledPromiseRejectionWarning: localStorage is not defined <--- see here
(node:18720) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:18720) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.jsuccess start webpack server - 3.547 s — 1/1 2.52 pages/second
 DONE  Compiled successfully in 9760ms                                                                                                                          18:25:05
⠀
warn Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

The reference to localstorage means that gatsby is a server side rendering framework, which means that during the build process the content/pages is build in node and with that access to certain apis is not available and leads to errors. In this mode, the development mode, gatsby takes a more permissive approach and lets you get away with some stuff, so that the development process becomes more streamlined and smoother. That will not happen when you generate a production build with gatsby build.

I'm going to enumerate some items that need addressing.

• In the file src/pages/Components/Footer

  <div className ="Footer_RS">
      <img className = "RS" src = "img/pictos/RS/FOOTER_INSTAGRAM.jpg" alt="Logo Instagram" onClick={()=> window.open("https://www.instagram.com/arlinaworld/", "_blank")}/>
      <img className = "RS" src = "img/pictos/RS/FOOTER_FACEBOOK.jpg" alt="Logo Facebook" onClick={()=> window.open("https://www.facebook.com/ArlinaWorld/", "_blank")}/>
    </div>

  I would remove the window.open in the image as it could lead to the what was already mentioned above about access to certain apis during the production build process. A safer approach to this would be to do something like the following:

  class Footer extends Component {
  handleInstagram = () => {
  if (typeof window !== `undefined`) {
    window.open("https://www.instagram.com/arlinaworld/", "_blank")
  }
  }
  handleFacebook = () => {
  if (typeof window !== `undefined`) {
    window.open("https://www.facebook.com/ArlinaWorld/", "_blank")
  }
  }
  render() {
  return (
    <div className="Footer">
      <p style={{ margin: 0 }}> © Arlina 2019 </p>
      <div className="Footer_RS">
        <img
          className="RS"
          src="img/pictos/RS/FOOTER_INSTAGRAM.jpg"
          alt="Logo Instagram"
          onClick={this.handleInstagram}
        />
        <img
          className="RS"
          src="img/pictos/RS/FOOTER_FACEBOOK.jpg"
          alt="Logo Facebook"
          onClick={this.handleFacebook}
        />
      </div>
      <Link to="/mentions"> Mentions Legales</Link> |
      <Link to="/CGV"> CGV</Link>
    </div>
  )
  }
  }
  ....

  With this small change to the component, it implements a safeguard so that when it will be built it will not break, but be available when you or the person that visits the page can interact with the image.

• The same logic needs to be applied to src/Components/Layout/Header.js, src/Components/Layout/HeaderPaiement.js, src/Components/Layout/HeaderPerso.js.
• Also in src/pages/Component/Pages/Achat.js, src/pages/Components/Pages/BillingForm.js, src/pages/Components/Pages/ChoixLivre.js, src/pages/Components/Pages/HomePage.js.
• Also checking src/pages/Components/Navigation.js, basically what you're doing here, in a nutshell is what gatsby does for you. You don't actually need the routing setup you have there. That setup is required in for instance create-react-app, but not here, of the top of my head, you would only need to create that type of routing if you had for instance a some sort of authentication setup which it seems you don't have at the moment, more context on that here and here.
• Also if you don't mind take a look at this, as it explains the folder structure/organization that gatsby uses. After trying some workarounds on your project i ran into some issues based on the current structure you have. Technically the pages folder should only contain the react components that will be used as pages for the website and leave other items out of it. There's some caveats to this, but for this particular case that's what should only be there, meaning the reducers folder and img folder for instance should be outside and same as ReduxWrapper.js, me personally i would group the redux related items in a folder called redux-data or something similar directly and move all of the redux related stuff there.
• One final thing, the packages redux-storage-engine-localstorage and 'redux-storage are not actually ssr friendly. You have to make some adjustments to the ReduxWrapper.js file and probably you have to create a gatsby-node.js to make them compliant with gatsby, more on that here.

If you'll allow me and don't get me wrong on this, i've checked the website based on the development mode and it looks really nice. But i would check what you had earlier before moving into gatsby and outline what should be a page and what should be a component that a page will displays and make the necessary changes, also i would take a look at how the images are added into the page/component, as they are not being displayed.

Sorry for not offering you more simple solution to your issue, but this something that needs some additional work correctly with gatsby.

[davidmusset]

Thanks for your help, that's really helpful. I'm still pretty new to react which explains why i'm not familiar with all these issues. But thanks for addressing, I will correct all this and hopefully build back gatbsy again successfully.

Thanks again

Le lun. 30 sept. 2019 à 21:51, jonniebigodes notifications@github.com a écrit :

@davidmusset https://github.com/davidmusset i've been through the reproduction you supplied and it seems that it needs some work so that it can work with gatsby.

I'm assuming based on the installation process i believe that you've initially setup the website with cra(create-react-app) and during that process some issues popped up, there's some vulnerabilities there as you can see below after the package installation is finished.

added 2276 packages from 1037 contributors and audited 58283 packages in 323.901s

found 64 vulnerabilities (63 low, 1 high)

run npm audit fix to fix them, or npm audit for details

I issued gatsby develop and i was able to get a development build up and running with some caveats. I'm getting the following:

gatsby develop

success open and validate gatsby-configs - 0.033 s

success load plugins - 0.125 s

success onPreInit - 0.004 s

success initialize cache - 0.010 s

success copy gatsby files - 0.172 s

success onPreBootstrap - 0.012 s

success source and transform nodes - 0.031 s

success Add explicit types - 0.004 s

success Add inferred types - 0.076 s

success Processing types - 0.047 s

success building schema - 0.229 s

success createPages - 0.001 s

success createPagesStatefully - 0.220 s

success onPreExtractQueries - 0.003 s

success update schema - 0.028 s

success extract queries from components - 0.184 s

success write out requires - 0.027 s

success write out redirect data - 0.002 s

success onPostBootstrap - 0.002 s

⠀

info bootstrap finished - 8.691 s

⠀

success run static queries - 0.049 s — 1/1 23.14 queries/second

success run page queries - 0.136 s — 27/27 206.77 queries/second

⠧ start webpack server

(node:18720) UnhandledPromiseRejectionWarning: localStorage is not defined <--- see here

(node:18720) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)

(node:18720) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.jsuccess start webpack server - 3.547 s — 1/1 2.52 pages/second

DONE Compiled successfully in 9760ms 18:25:05

⠀

warn Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

The reference to localstorage means that gatsby is a server side rendering framework, which means that during the build process the content/pages is build in node and with that access to certain apis is not available and leads to errors. In this mode, the development mode, gatsby takes a more permissive approach and lets you get away with some stuff, so that the development process becomes more streamlined and smoother. That will not happen when you generate a production build with gatsby build.

I'm going to enumerate some items that need addressing.

• In the file src/pages/Components/Footer

  window.open("https://www.instagram.com/arlinaworld/", "_blank")}/> window.open("https://www.facebook.com/ArlinaWorld/", "_blank")}/>

I would remove the window.open in the image as it could lead to the what was already mentioned above about access to certain apis during the production build process. A safer approach to this would be to do something like the following:

class Footer extends Component {

handleInstagram = () => {

if (typeof window !== `undefined`) {

  window.open("https://www.instagram.com/arlinaworld/", "_blank")

}

}

handleFacebook = () => {

if (typeof window !== `undefined`) {

  window.open("https://www.facebook.com/ArlinaWorld/", "_blank")

}

}

render() {

return (

  <div className="Footer">

    <p style={{ margin: 0 }}> © Arlina 2019 </p>

    <div className="Footer_RS">

      <img

        className="RS"

        src="img/pictos/RS/FOOTER_INSTAGRAM.jpg"

        alt="Logo Instagram"

        onClick={this.handleInstagram}

      />

      <img

        className="RS"

        src="img/pictos/RS/FOOTER_FACEBOOK.jpg"

        alt="Logo Facebook"

        onClick={this.handleFacebook}

      />

    </div>

    <Link to="/mentions"> Mentions Legales</Link> |

    <Link to="/CGV"> CGV</Link>

  </div>

)

}

} ....

With this small change to the component, it implements a safeguard so that when it will be built it will not break, but be available when you or the person that visits the page can interact with the image.

• The same logic needs to be applied to src/Components/Layout/Header.js, src/Components/Layout/HeaderPaiement.js, src/Components/Layout/HeaderPerso.js.
• Also in src/pages/Component/Pages/Achat.js, src/pages/Components/Pages/BillingForm.js, src/pages/Components/Pages/ChoixLivre.js, src/pages/Components/Pages/HomePage.js.
• Also checking src/pages/Components/Navigation.js, basically what you're doing here, in a nutshell is what gatsby does for you. You don't actually need the routing setup you have there. That setup is required in for instance create-react-app, but not here, of the top of my head, you would only need to create that type of routing if you had for instance a some sort of authentication setup which it seems you don't have at the moment, more context on that here https://www.gatsbyjs.org/docs/routing/ and here https://www.gatsbyjs.org/blog/2019-07-11-user-testing-accessible-client-routing/#what-is-client-side-routing .
• Also if you don't mind take a look at this https://www.gatsbyjs.org/docs/gatsby-project-structure/, as it explains the folder structure/organization that gatsby uses. After trying some workarounds on your project i ran into some issues based on the current structure you have. Technically the pages folder should only contain the react components that will be used as pages for the website and leave other items out of it. There's some caveats to this, but for this particular case that's what should only be there, meaning the reducers folder and img folder for instance should be outside and same as ReduxWrapper.js, me personally i would group the redux related items in a folder called redux-data or something similar directly and move all of the redux related stuff there.
• One final thing, the packages redux-storage-engine-localstorage and 'redux-storage are not actually ssr friendly. You have to make some adjustments to the ReduxWrapper.js file and probably you have to create a gatsby-node.js to make them compliant with gatsby, more on that here https://www.gatsbyjs.org/docs/debugging-html-builds/.

If you'll allow me and don't get me wrong on this, i've checked the website based on the development mode and it looks really nice. But i would check what you had earlier before moving into gatsby and outline what should be a page and what should be a component that a page will displays and make the necessary changes, also i would take a look at how the images are added into the page/component, as they are not being displayed.

Sorry for not offering you more simple solution to your issue, but this something that needs alot of work correctly with gatsby.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/17991?email_source=notifications&email_token=ALDG2SANKK7M5KFJLYKB4OLQMJKEPA5CNFSM4I3ZSKXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7637YQ#issuecomment-536723426, or mute the thread https://github.com/notifications/unsubscribe-auth/ALDG2SAZNW2ECLZ23YCQARDQMJKEPANCNFSM4I3ZSKXA .

[jonniebigodes]

@davidmusset no need to thank, i'm sorry that was not more helpfull, when you're able feel free to close this issue. Should more issues arise feel free to open it up then or create a new issue.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

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

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[michelpf]

@davidmusset you mentioned that you're using react router dom right and i saw that you have the following in your package.json

"react-router-dom": "^5.0.0",
 "react-router-hash-link": "^1.2.1",
"react-router-hash-link-offset": "^1.0.1",

Gatsby internally uses @reach-router [https://reach.tech/router] and the issue could be with that package, but i'm speculating a bit.

If you need to need to make private routes, that are gated, you can take a look at client-only-paths and simple authentication to see how to setup. But it can be something different alltogether, if you don't mind, can you make a reproduction following these steps so that it can be looked at in more detail.

In my case, changing from import { Link } from react-router-dom to import { Link } from @reach/router, solved the issue!

Thanks!