静态生产中的 ReactJs：白页“Typeerror: Object(...) is not a function”答案

【问题标题】：ReactJs in static production: White page "Typeerror: Object(...) is not a function"静态生产中的 ReactJs：白页“Typeerror: Object(...) is not a function”
【发布时间】：2021-11-12 19:36:22
【问题描述】：

我有一个 ReactJs 项目，该项目已经过测试并在开发中完美运行。

我现在正尝试将它托管在我基于 Ubuntu 的 VPS 上的 Apache 服务器上。路由显然工作正常，一个简单的“关于页面”加载正常。但是所有其他路由都会导致空白页，以及以下控制台错误：

我怀疑依赖项可能有问题：非工作组件的示例依赖列表如下所示：

import { Row, Col } from 'antd';
import { useNavigate } from "react-router-dom";
import BouncingBox from '../../components/bouncing-box/bouncing-box.jsx';
import RoundedBtn from '../../components/rounded-btn/rounded-btn.jsx';
import { Input } from 'antd';
import { useState, useRef } from 'react';
import FirebaseService from '../../services/FirebaseService.js';
import SessionStorageService from '../../services/SessionStorageService.js'
import { useParams } from 'react-router';
import { useEffect } from 'react/cjs/react.development';

有谁知道是什么导致了这个问题？这是一个基于 create-react-app 的项目，所以我们使用 webpack 和一些自定义库。应该注意的是，我已经尝试将它托管在 Netlify 上，结果完全相同，所以可能不是服务器配置问题。

编辑：

join-game.jsx 第 27 行引用了这段代码...

 useEffect(() => {
        if (inputstate == 1) isHosting.current = true
    }, [])

【问题讨论】：

标签： javascript reactjs webpack dependencies create-react-app

【解决方案1】：

所以对我来说问题是导入：

import { useEffect } from 'react/cjs/react.development';

是自动生成的。所以我删除了线路并切换了：

import { useState, useRef } from 'react';

收件人：

import { useState, useRef, UseEffect } from 'react';

故事的寓意：您可以在开发工具中单击导致问题并漂亮地打印它，这将提示您可能应该检查导入的文件。

【讨论】：