Vite + Antd 앱은 Windows에서는 작동하지만 Linux 프로덕션에서는 단일 페이지가 충돌합니다 (Minified React Error #130)
발행: (2025년 12월 13일 오후 01:45 GMT+9)
3 min read
원문: Dev.to
Source: Dev.to
Issue
React 애플리케이션(Vite + Ant Design)을 Nginx(Linux) 위에 배포했습니다. 로컬 환경(Windows)에서는 애플리케이션이 완벽히 동작하고, 일반적으로 프로덕션에서도 정상적으로 실행됩니다.
전체 앱은 특정 라우트(MachinesDashboard)로 이동하기 전까지는 정상적으로 동작합니다.
- Windows (local & prod build): 페이지가 완벽히 로드됩니다.
- Linux (Nginx production): 해당 라우트를 클릭하면 즉시 오류‑바운더리 화면이 표시되며 페이지가 크래시됩니다.
Error
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.Debugging So Far
잘못된 import가 원인일까 싶어, 프로덕션 빌드에서 충돌하는 컴포넌트(MachinesDashboard) 내부에 console.log를 추가해 import들을 확인했습니다.
Imports in the crashing file
import { Select, Badge, Button, Statistic, Row, Col, message, Modal } from 'antd';로그에 출력된 값은 다음과 같습니다:
| Import | Type | Valid? |
|---|---|---|
EChart | Function | ✅ |
DraftDetails | Function | ✅ |
CoreTable | Function | ✅ |
Icon | Function | ✅ |
ClockCircleOutlined | Object ({ $$typeof: Symbol(react.forward_ref), ... }) | ✅ |
모든 커스텀 컴포넌트와 Ant Design 아이콘이 정상적인 것으로 보였습니다.
Question
모든 커스텀 컴포넌트와 아이콘이 정상이라면, 왜 이 특정 라우트가 Linux에서만 크래시될까요?
Possible causes I’m considering
- Ant Design imports –
import { Row, Col } from 'antd'같은 구조 분해 import가 Linux 프로덕션 빌드에서 빈 객체/모듈로 해석될 가능성이 있나요? - File‑system case sensitivity – 파일 이름(
DraftDetails.tsx,ECharts.tsx)은 import와 일치하지만, 폴더 이름이 대소문자와 맞지 않을 경우 대소문자 구분이 있는 Linux 파일 시스템에서 404 없이 객체가 반환될 수 있을까요? - Cyclic dependencies – 순환 의존성이 Linux에서 파일 정렬 방식 차이 때문에 렌더링 시점에 컴포넌트가 undefined/object가 되는 경우가 있을까요?
Environment
- React: 18
- Vite: 4
- Host: Linux Ubuntu + Nginx
- Build:
vite build