Vite + Antd 应用在 Windows 上正常，但在 Linux 生产环境的单页崩溃（压缩的 React 错误 #130）
发布: (2025年12月13日 GMT+8 12:45)
3 min read
原文: Dev.to
Source: Dev.to
问题
我有一个使用 Vite + Ant Design 的 React 应用，部署在 Nginx（Linux）上。该应用在本地环境（Windows）下运行完美，通常在生产环境也能正常运行。
整个应用在我导航到一个特定路由（MachinesDashboard）之前都能正常工作。
- Windows（本地 & 生产构建）：页面加载完美。
- Linux（Nginx 生产环境）：点击该路由后页面立即崩溃，出现错误边界屏幕。
错误
Minified React error #130: Element type is invalid: expected a string (for built‑in components) or a class/function (for composite components) but got: object.已进行的调试
我怀疑是导入无效，于是向崩溃组件（MachinesDashboard）的生产构建中添加了 console.log，检查导入情况。
崩溃文件中的导入
import { Select, Badge, Button, Statistic, Row, Col, message, Modal } from 'antd';日志输出如下：
| 导入 | 类型 | 有效吗 |
|---|---|---|
EChart | 函数 | ✅ |
DraftDetails | 函数 | ✅ |
CoreTable | 函数 | ✅ |
Icon | 函数 | ✅ |
ClockCircleOutlined | 对象 ({ $$typeof: Symbol(react.forward_ref), ... }) | ✅ |
所有自定义组件和 Ant Design 图标看起来都是有效的。
问题
既然我的所有自定义组件和图标都看起来有效，为什么只有这个特定路由在 Linux 上会崩溃？
我正在考虑的可能原因
- Ant Design 导入 – 像
import { Row, Col } from 'antd'这样的解构导入在 Linux 生产构建中会解析为一个空对象/模块吗？ - 文件系统大小写敏感 – 我的文件名（
DraftDetails.tsx,ECharts.tsx）与导入匹配，但如果文件夹名称大小写不匹配，是否会在大小写敏感的 Linux 文件系统上导致导入得到一个对象而不是抛出 404？ - 循环依赖 – 循环依赖在 Linux（由于文件排序）下是否会表现不同，导致组件在渲染时为 undefined/对象？
环境
- React: 18
- Vite: 4
- 主机: Linux Ubuntu + Nginx
- 构建:
vite build