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"
  }

[vivar25]

I'm getting the same error with NPM, however locally it works fine, and once we deploy and run it throws the same error

[zaid0088]

I solved it like this,

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
    tsconfigPaths(),
  ],
  server: {
    host: '0.0.0.0',
    port: 3000,
  },
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        defaults: true,
        unused: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            const module = id.toString().split('node_modules/')[1].split('/')[0];
            // Group emotion packages together
            if (module.startsWith('@emotion')) return 'vendor-emotion';
            if (module === '@mui') return 'vendor-mui';
            return 'vendor';
          }
        },
      },
    },
  },
});

[vivar25]

Thanks a lot @zaid0088, it works fine with the manual chunks :)

[Andarist]

A runnable repro case has to be provided to investigate this - although I strongly suspect the issue is not really on the Emotion side of things.