React静态生产环境出现白页报错TypeError: Object(...) is not a function

问题原因 #

你代码中的useEffect依赖引入路径错误，当前你使用的引入语句为：

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

react/cjs/react.development是React仅在开发环境下可用的内部文件路径，执行生产构建时该文件不会被打包到最终产物中，所以部署后会找不到对应导出，触发运行时报错，最终导致页面白屏。

修复方法 #

将上述错误的useEffect引入语句删除，把useEffect合并到react的默认引入中即可，你贴出的第27行useEffect的业务逻辑本身不存在问题，无需修改。修改后的引入示例如下：

import { Row, Col, Input } from 'antd';
import { useNavigate } from "react-router-dom";
import { useParams } from 'react-router';
// 合并引入react的所有hook
import { useState, useRef, useEffect } from 'react';
// 其余自定义组件、服务引入保持不变
import BouncingBox from '../../components/bouncing-box/bouncing-box.jsx';
import RoundedBtn from '../../components/rounded-btn/rounded-btn.jsx';
import FirebaseService from '../../services/FirebaseService.js';
import SessionStorageService from '../../services/SessionStorageService.js'

修改完成后重新执行npm run build生成生产包，再部署新的构建产物即可，所有部署环境都会恢复正常。

内容的提问来源于stack exchange，提问作者Joachim Bülow