Uncaught ReferenceError: Cannot Access 'X' Before Initialization in Production Build

[zaid0088]

Current behavior:

I am using @emotion/styled in a React + Vite project. The application works fine in development, but after deploying or doing yarn build and then yarn preview, there is an error coming from emotion

To reproduce:

Set up a React project with Vite.

Install @emotion/styled and @mui/material.

Use yarn build to build the app and yarn preview to run it

Open the app in a browser and observe the error.

Expected behavior:

The app should work in production just as it does in development.

Environment information:

{
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^6.1.6",
    "@mui/material": "^6.1.6",
    "axios": "^1.7.7",
    "framer-motion": "^11.11.11",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.27.0",
    "styled-components": "^6.1.13",
    "vite-tsconfig-paths": "^5.1.0",
    "zustand": "^5.0.0"
  }
}

{
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@typescript-eslint/eslint-plugin": "^8.26.1",
    "@typescript-eslint/parser": "^8.26.1",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.22.0",
    "eslint-config-prettier": "^10.1.1",
    "eslint-plugin-prettier": "^5.2.3",
    "eslint-plugin-react": "^7.37.4",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "husky": "^9.1.7",
    "lint-staged": "^15.5.0",
    "prettier": "^3.5.3",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "5.4.9"
  }