Question

这是我在React中的第一个应用程序。在localhost中，一切正常，当我使用Github Pages进行部署时，我的应用程序中的某些页面（信息/图像/É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或更高版本，并且此open issue应该是固定的
yarn upgrade -L react-helmet

RangeError：超出最大调用堆栈大小（反应）

1 个答案: