[AppRouterCacheProvider] Uncaught Error: Switched to client rendering because the server rendering errored

[vicasas]

Search keywords

Switched to client rendering because the server rendering errored

Latest version

• I have tested the latest version

Steps to reproduce

Steps:

1. Open this link to repository example: https://github.com/vicasas/mui-turbopack-not-worker
2. Read the README.md
3. Clone the repository.
4. Install dependencies.
5. Start testing by running the command npm run dev according to the instructions in the README.md file.

Current behavior

When using the Suspense component (either explicitly in a component or implicitly through the loading.tsx file in a Next.js route) in an application built with Next.js 15, App Router, Turbopack, and Material UI 7, the following error is thrown: Uncaught Error: Switched to client rendering because the server rendering errored:.

This error occurs at runtime when starting the development server with npm run dev (with Turbopack enabled by default), and can be reproduced by performing any of the following actions:

1. Modifying the styles of a Material UI component using the sx prop (e.g., changing the value of a color or margin).
2. Changing an option inside the options prop of MUI's AppRouterCacheProvider component, such as switching between key: 'css' and key: 'mui'.

After making one of these changes and manually refreshing the browser, the error appears in the console.

This behavior does not occur when Turbopack is disabled, which suggests that the issue is related to the interaction between Turbopack and Emotion’s styling system — specifically how the cache is managed during server-side rendering.

You can observe this behavior in the sample repository by navigating to localhost:3000/mui. If you follow steps 1 or 2 and then manually refresh the browser, you will see the error in the console. In contrast, this issue does not occur at localhost:3000 when repeating the same steps. It's worth noting that this latter route does not use any Material UI components.

The error is:

Uncaught Error: Switched to client rendering because the server rendering errored:

Cannot read properties of null (reading 'useContext')
    at exports.useContext (home/username/bitbuck…me.dev.js:220:27941)
    at useDefaultProps (/home/username/bitbuc…2a442._.js:5682:233)
    at useDefaultProps (/home/username/bitbuc…a442._.js:12078:218)
    at useThemeProps (/home/username/bitbuc…c00ea._.js:1883:239)
    at Container (/home/username/bitbuc…4c00ea._.js:1777:23) 

Expected behavior

The use of the Suspense component, either directly or via the loading.tsx file in a route, should work without throwing errors during server-side rendering, even when:

1. Styles are modified during development using the sx prop from Material UI.
2. Props of the AppRouterCacheProvider component, such as the key prop, are updated.

In other words, style or configuration changes during development should not interrupt server-side rendering or force an unexpected fallback to client-side rendering.

Additionally, the behavior should be consistent whether Turbopack is used or not, without introducing additional errors when using the latter.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  7.1.0 
    @mui/icons-material: ^7.1.0 => 7.1.0 
    @mui/material: ^7.1.0 => 7.1.0 
    @mui/material-nextjs: ^7.1.0 => 7.1.0 
    @mui/private-theming:  7.1.0 
    @mui/styled-engine:  7.1.0 
    @mui/system:  7.1.0 
    @mui/types:  7.4.2 
    @mui/utils: ^7.1.0 => 7.1.0 
    @types/react: ^19 => 19.1.3 
    react: ^19.0.0 => 19.1.0 
    react-dom: ^19.0.0 => 19.1.0 
    typescript: ^5 => 5.8.3 

[pepew-le-boss]

I have the same problem with const router = useRouter() inside a client component that is wrapped is a server component that is wrapped in a <Suspense />.

Removing <Suspense /> or removing turbopack fix the problem but neither of these solutions are good.

[pepew-le-boss]

I think this issue is a NextJS issue and not a mui issue.

[findmomin]

The same thing is happening to me as well (I'm not using mui):

[vicasas]

@findmomin Could you explain how to reproduce the error without relying on MUI? I tried to replicate it on my own, but I wasn't able to get the same result.

[findmomin]

@vicasas I'm not sure how to exactly reproduce this error or which package is causing the error. But all I'm doing is:

1. Fetching some data in a server component (with drizzle-orm)
2. Suspending that component in its parent server component

Note: The error doesn't occur in production.