RangeError: Превышен максимальный размер стека вызовов (React)

Question

Это мое первое приложение в React. В localhost все работает нормально, и при развертывании с помощью Github Pages некоторые страницы из моего приложения (Info / Images / Évenements) не отображаются. Каждый раз, когда я нажимаю на их ссылку, чтобы получить к ним доступ, на моей консоли появляется белая страница и эта ошибка:

RangeError: Максимальный размер стека вызовов превышен в Object.toString.

Кроме того, когда я обновляю страницу, страницы github возвращают страницу 404.

Вот мой пакет:

{
  "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"
  }
} 

Ошибка сообщается в react-dom.production.min.js строке 3869 и 5081:

function supported(object) {
  return Object.prototype.toString.call(object) == '[object Arguments]';
}

Вот пример компонента, который не рендерит в производстве:

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;

Кто-то знает, почему это происходит на производстве, а не на разработке, и как это исправить?

Спасибо

Answer 1

Обновление до v5.2.1 или выше, и этот открытый выпуск должен быть исправлен
yarn upgrade -L react-helmet