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

[BreakBB]

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

npx @mui/envinfo

``` 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

[Janpot]

@BreakBB I tried your steps, I can't reproduce. To save us from endlessly going back and forth on this, please provide a link to a minimal github repository that demonstrates the problem.

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[BreakBB]

I forgot to mention a key part of this issue. Of cause you need to import and use any MUI components, so they are actually bundled and not removed by the tree shaking.

I edited the App.tsx of the example project to include a Typography.

Here is an example repository: https://github.com/BreakBB/mui-bundle-error (with the latest vite version).

1. npm ci
2. npm run build
3. npx serve -s dist
4. Open localhost:3000 and check the console output to see the error

[Janpot]

@BreakBB I tried your repository and replaced the Typography import with:

import styled from "@emotion/styled";

const Typography = styled.p({
  color: "hotpink",
});

It seems to fail in the exact same way. Looks like this is an emotion issue. I can't seem to find a corresponding issue on their repository. Would you be interested in opening a ticket with them directly?

[BreakBB]

Hey @Janpot

I am glad this can be reproduced and you are correct, your modification fails the same way (hotpink was a good choice btw 😁).

Sure, I'll reach out to them and also modify the repository to make it more clear the curl print seems to be in @emotion.