Load order of @emotion/styled and @emotion/react is important since 6.1.0

Steps to reproduce

Link to live example: (required)

Steps:

1. npm create vite@4.4.5
2. npm install in the freshly created project
3. npm install @mui/material@6.1.0 @emotion/react@11.13.3 @emotion/styled@11.13.0
4. Edit vite.config.ts to look like below
5. Run npm run build
6. Run npx serve -s dist
7. Open localhost:3000 and check the console output to see the error

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    minify: false, // to be readable
    rollupOptions: {
      output: {
        manualChunks: {
          emotionStyled: ["@emotion/styled"],
          emotionReact: ["@emotion/react"],
        }
      },
    },
  },
})

Current behavior

When using manual chunks in the rollup config, to reduce the individual chunk size, the order in which the chunks are build matters since MUI v6.1.0.

We add manual chunking to improve load times. Usually we simply do so by placing every dependency in it's own chunk and that worked very good till MUI v6.1.0 (reverting back to MUI v6.0.2 works fine).
The issue is broken down with the chunking settings below. When changing the order of both entries, everything works just fine.

Broken:

        manualChunks: {
          emotionStyled: ["@emotion/styled"],
          emotionReact: ["@emotion/react"],
        }

Works:

        manualChunks: {
          emotionReact: ["@emotion/react"],
          emotionStyled: ["@emotion/styled"],
        }

In Firefox the error message is:

Uncaught ReferenceError: can't access lexical declaration 'React' before initialization

React is imported from the react chunk.

Expected behavior

Manual chunking should not effect the startup of MUI.

Context

No response

Your environment

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 20.17.0 - ~/.n/bin/node
    npm: 10.8.2 - ~/.n/bin/npm
    pnpm: 8.11.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.138
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  6.1.0 
    @mui/icons-material: ^6.1.0 => 6.1.0 
    @mui/material: ^6.1.0 => 6.1.0 
    @mui/private-theming:  6.1.0 
    @mui/styled-engine:  6.1.0 
    @mui/system:  6.1.0 
    @mui/types:  7.2.16 
    @mui/utils:  6.1.0 
    @types/react: ^18.2.15 => 18.3.7 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^5.0.2 => 5.6.2 

Search keywords: rollup chunks vite React emotion