Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
BreakBB opened this issue Sep 19, 2024 · 0 comments
Open
Assignees
Labels
status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@BreakBB
Copy link
Contributor

BreakBB commented Sep 19, 2024

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

image

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

@BreakBB BreakBB added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 19, 2024
@BreakBB BreakBB changed the title Order of @emotion/styled and @emotion/react is important since 6.1.0 Load order of @emotion/styled and @emotion/react is important since 6.1.0 Sep 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Development

No branches or pull requests

2 participants