Vite + Antd App works on Windows but Single Page crashes on Linux Production (Minified React Error #130)

#devops #help #linux #react

I have a React application (Vite + Ant Design) deployed on Nginx (Linux). The application works perfectly in my local environment (Windows) and usually runs fine in production.

The Issue: The entire application works correctly until I navigate to one specific route (MachinesDashboard).

On Windows (Local & Prod build): The page loads perfectly.

On Linux (Nginx Production): Clicking this specific route immediately crashes the page with a error boundary screen.

The Error: The console logs:

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.

My Debugging So Far: I suspected an invalid import, so I added console.log statements inside the crashing component (MachinesDashboard) in the production build to inspect the imports.

Code & Logs: Here are the imports in the crashing file:

JavaScript

import { Select, Badge, Button, Statistic, Row, Col, message, Modal } from 'antd';
import {
ClockCircleOutlined,
WarningOutlined,
ArrowRightOutlined,
FullscreenOutlined,
} from '@ant-design/icons';
import EChart from '../../components/common/Echarts';
import DraftDetails from '../../components/common/DraftDetails';
import CoreTable from '../../components/common/CoreTable/CoreTable';
import Icon from '../../components/SvgIcon/Icon';
What the Production Logs Show: I logged these components in the crashing environment:

EChart: Function (Valid)

DraftDetails: Function (Valid)

CoreTable: Function (Valid)

Icon: Function (Valid)

ClockCircleOutlined: Object ({$$typeof: Symbol(react.forward_ref), ...}) (Valid React Ref)

My Question: Since all my custom components and the Icons seem to be valid, why does this specific route crash only on Linux?

Could this be related to:

Ant Design Imports: Do destructured imports like import { Row, Col } from 'antd' sometimes resolve to an empty object/module in Linux production builds?

File System Case Sensitivity: I have checked my file names (DraftDetails.tsx, ECharts.tsx) and they seem to match, but could a mismatched folder name cause an import to become an object without throwing a 404?

Cyclic Dependencies: Could a circular dependency behave differently on Linux (due to file sorting) causing a component to be undefined/object at render time?

Environment:

React 18 / Vite 4

Host: Linux Ubuntu + Nginx

Build: vite build