ReactJs in static production: White page "Typeerror: Object(...) is not a function"

Question

我有一个 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
    }, [])

Answer 1

所以我的问题是导入：

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

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

import { useState, useRef } from 'react';

收件人：

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

故事的寓意：您可以在开发工具中单击引起问题的问题并将其打印出来，这将提示您应该在其中检查导入的文件。

ReactJs in static production: White page "Typeerror: Object(...) is not a function"

ReactJs in static production: White page "Typeerror: Object(...) is not a function"

javascript

reactjs

webpack

dependencies

create-react-app