emotion
emotion copied to clipboard
Hydration error using Next.js 15 and MUI 6 when using Turbopack builder
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:
- Clone https://github.com/kangalio/emotion-hydration-error-reproducible
- Run
npm installand thennpx next dev --turbopack - Open the website (i.e.
localhost:3000) - 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.0react: 19.0.0react-dom: 19.0.0react-is: 16.13.1react-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