Hydration error using Next.js 15 and MUI 6 when using Turbopack builder

[kangalio]

Current behavior:

Using Next.js 15 and MUI 6, an Emotion-related hydration error appears when the page is SSR-rendered. After reading chakra-ui/chakra-ui#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:

• Hydration errors in development for Next.js app with MUI Material v5 after updating emotion dependencies #3222

[karimodm]

I have the same issue when running with --turbopack:

Unhandled Runtime Error

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error


 ...
  <OuterLayoutRouter parallelRouterKey="children" segmentPath={[...]} template={<RenderFromTemplateContext>}>
    <RenderFromTemplateContext>
      <ScrollAndFocusHandler segmentPath={[...]}>
        <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
          <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
            <LoadingBoundary loading={null}>
              <HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
                <RedirectBoundary>
                  <RedirectErrorBoundary router={{...}}>
                    <InnerLayoutRouter parallelRouterKey="children" url="/dashboard..." tree={[...]} childNodes={Map} ...>
                      <script>
                        <script>
                          <script>
                            <script>
                              <script>
                                <Layout>
                                  <Box sx={{display:"flex"}}>
                                    <Styled(div) as="div" ref={null} className="MuiBox-root" theme={{...}} sx={{display:"flex"}}>
                                      <Insertion>
+                                        <div className="MuiBox-root css-k008qs">
-                                        <style data-emotion="css-global ghzezc" data-s="">

[OliverHolden]

I am also seeing this error with:

"@emotion/react": "11.14.0",
"@emotion/styled": "11.14.0",
"@heroicons/react": "2.2.0",
"@mui/icons-material": "6.4.2",
"@mui/material": "6.4.2",

[deluxart]

Greetings!

I have the same problem, but with a slightly different configuration (NextJS 15 / Chakra UI 3)...what I have not done - nothing helps, but without --turbopack - the error disappears(