RangeError: Maximum call stack size exceeded (React) - reactjs

Question

This is my first app in React. In localhost everything works fine, and when I deploy with Github Pages, some pages from my app (Info / Images / Évenements) doesn't render. Every time when I click in their link to access them, I get a white page and this error on my console:
RangeError: Maximum call stack size exceeded at Object.toString.
Also When I refresh the page, github pages returns a 404 page.
There's my package:
{
"name": "gyuto-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#u-wave/react-vimeo": "^0.5.0",
"auditjs": "^3.0.10",
"bulma": "^0.7.2",
"gh-pages": "^2.0.1",
"gsap": "^2.0.2",
"i18next": "^13.0.0",
"i18next-browser-languagedetector": "^2.2.4",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-flexbox-grid": "^2.1.2",
"react-helmet": "^5.2.0",
"react-i18next": "^8.4.0",
"react-media": "^1.8.0",
"react-router-dom": "^4.3.1",
"react-router-page-transition": "^3.1.0",
"react-scripts": "2.0.5",
"react-transition-group": "^2.5.0",
"rodal": "^1.6.3"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "yarn run build",
"deploy": "gh-pages -b master -d build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"node-sass": "^4.9.4",
"sass-loader": "^7.1.0"
}
}
The error is reported on react-dom.production.min.js line 3869 & 5081:
function supported(object) {
return Object.prototype.toString.call(object) == '[object Arguments]';
}
Here's an exemple of a component not rendering in production:
PageImages.jsx
import React, { Component, Fragment } from "react";
import { Helmet } from 'react-helmet';
import { images } from "../data";
import { Row, Col } from "react-flexbox-grid";
import { Link, NavLink } from "react-router-dom";
import Image from "./assets/Image";
import { withNamespaces } from 'react-i18next';
class PageImages extends Component {
render() {
const listGaleries = images.map(i => {
if (i.id) {
return (
<Col key={i.id} xs={12} sm={6} md={6} lg={4}>
<Link to={`/images/${i.id}`}>
<Image imagesObject={i} />
</Link>
</Col>
);
} else {
return (
<Fragment>
<Helmet>
<style>{'body { background-color: #f5f5f5 !important; } a.itemsColor{color: black} .cursor{display:none}'}</style>
<title>{this.props.t('nav.images')}</title>
</Helmet>
<div className="pageNotFoundCtr">
<p>
{this.props.t('nav.soon')}
</p>
<p>
<NavLink to={"/doclist"} className="snapCursor js-click" data-snap-scale="3.5">
{this.props.t('nav.doclistPage')}
</NavLink>
</p>
</div>
</Fragment>
)
}
})
return (
<Fragment>
<Helmet>
<title>{this.props.t('nav.images')}</title>
<style>{'body { background-color: #f5f5f5 !important; } a.itemsColor{color: black} .cursor{display:none}'}</style>
</Helmet>
<Row className="imagesRow">{listGaleries}</Row>
</Fragment>
);
}
}
export default withNamespaces('common')(PageImages);
Image.jsx
import React, { Component } from "react";
class Image extends Component {
render() {
return (
<div className="galeries container">
<div className="parentZoomIn">
<div
className="childZoomIn"
style={{
backgroundImage: `linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("${
this.props.imagesObject.cover
}")`
}}
>
<div className="text">
<p>{this.props.imagesObject.title.fr}</p>
</div>
</div>
</div>
</div>
);
}
}
export default Image;
Does someone knows why it's happening on production, and not on development, and a way to fix it?
Thanks

Answer 1

Upgrade to v5.2.1 or higher and this open issue should be fixed
yarn upgrade -L react-helmet