emotion

emotion copied to clipboard

Current behavior:

Using Next.js 15 and MUI 6, an Emotion-related hydration error appears when the page is SSR-rendered. After reading https://github.com/chakra-ui/chakra-ui/issues/8970, I figured out, this only happens using the new --turbopack builder from Next.js (which has been the new default for some time)

To reproduce:

1. Clone https://github.com/kangalio/emotion-hydration-error-reproducible
2. Run npm install and then npx next dev --turbopack
3. Open the website (i.e. localhost:3000)
4. Observe:
   • 
   • 

Expected behavior:

I expect no error to be thrown.

Environment information:

• @emotion/babel-plugin: 11.13.5
• @emotion/cache: 11.14.0
• @emotion/hash: 0.9.2
• @emotion/is-prop-valid: 1.3.1
• @emotion/memoize: 0.9.0
• @emotion/react: 11.14.0
• @emotion/serialize: 1.3.3
• @emotion/sheet: 1.4.0
• @emotion/styled: 11.14.0
• @emotion/unitless: 0.10.0
• @emotion/use-insertion-effect-with-fallbacks: 1.2.0
• @emotion/utils: 1.4.2
• @emotion/weak-memoize: 0.4.0
• react: 19.0.0
• react-dom: 19.0.0
• react-is: 16.13.1
• react-transition-group: 4.4.5

(Taken from the linked reproducible repo's package-lock.json)

Potentially related issues:

• https://github.com/emotion-js/emotion/issues/3222