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(

[whoisasey]

I am also having the same issue!

"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.4.6",
"@mui/material": "^6.1.10",
"next": "15.1.0",
"next-auth": "^4.24.11",
"react": "^19.0.0",
"react-dom": "^19.0.0",

node version 23.5.0

[boiseiben]

I was seeing this error too, and solved it.

First, error reproduction steps (skip several by cloning this at the linked-to point in history):
npx create-next app (installed v15.2.2, the latest)
Project name: emotion3308
TypeScript, ESLint, Tailwind, src/ dir, app router, Turbopack: Yes
Customize import alias: No
cd emotion3308
npm i @mui/material @emotion/react @emotion/styled
In src/app/page.tsx, add import Button from '@mui/material/Button';
In the same file just before the first <Image add:

        {/* You can get rid of both the error (and the button) by moving the contents of 
        the next line to the end of the line below it.
        */}
        <Button>Problem Causer</Button>

Or you can skip all that and just clone this at the linked-to point in the commit history.
Then npm run dev (aka next dev --turbopack) and the issue is observed. Note that if you make changes and rely on the soft reload, ANY change you make will appear to fix the issue. Be sure to do an F5 full page reload to test and see if you see the error.

I found this issue from last summer in which <Typography> was being rendered as <span> on the server and <p> on the client which leads to a mismatch. However, in that case, updating to the latest canary version of Next worked, and that has since been released but the problem is still being observed. I also found this still-open issue from around the same time frame. Per this comment, wrapping with an MUI <Box> fixes the issue, but that does not seem like an ideal solution.

Per this older Reddit post, following the MUI instructions for Next.js integration did much better. Namely, stop the server, npm i @mui/material-nextjs @emotion/cache (the latter just makes the dependency more explicit), then modify src/app/layout.tsx to import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter'; at the top and wrap the {props.children} line in <AppRouterCacheProvider>… </AppRouterCacheProvider>. There are some other useful instructions there. I would propose closing this Issue.