Gatsby - Build - WebpackError : Invariant failed - reactjs

Question

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 have no idea where to start debugging this. My website is pretty simple with some static pages and redux.
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"
]
}
This doesn't work when running "gatsby build", it stops at the step "Building static HTML for pages" and the error above is shown

Answer 1

I'd bet the problem is your use of redux-storage. Gatsby can't access any browser APIs during build, so you'll need to wrap a conditional check to make sure localstorage is available (per the html debugging page that has already been suggested).
I'm not familiar with redux usage in gatsby, but I would rewrite your redux wrapper to be closer to the official example, and put the redux-storage setup in a if (typeof window !== 'undefined') block