Source:  Twitter logo

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

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

1 users liked answer #0dislike answer #01

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).