[material-ui] Hydration error in Material UI v6 + Next.js

arklanq-patronus commented 3 weeks ago

Steps to reproduce

Link to live example:

\<CodeSandbox>

Steps:

Go to linked CodeSandbox
Preview app on port :3000
Observe the hydration error

Current behavior

MUI is rendering <Typography> as:

<span> on the server
<p> on the client

... which results from not respecting variantMapping from the theme.

Expected behavior

MUI should render the same tags, both on server & client, respecting variantMapping configuration.

Context

I think this is important:

Next 15 vRC (pages directory)
React v19 RC
MUI v6

Theme configuration

```ts const theme = createTheme({ typography: { bodyRegular: { fontSize: "16px", lineHeight: "22px", fontWeight: 400, color: "red", }, }, components: { MuiTypography: { defaultProps: { variantMapping: { bodyRegular: "p", }, }, }, }, }); ```

The code fragment causing the error

```tsx Hello world! ```

Hydration error

```diff 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 See more info here: https://nextjs.org/docs/messages/react-hydration-error +

- ```

https://github.com/mui/material-ui/issues/43501#issuecomment-2315948023

Your environment

Browser: Chrome 128.0.6613.85

npx @mui/envinfo

``` System: OS: macOS 14.6.1 Binaries: Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node npm: 10.8.2 - ~/.nvm/versions/node/v20.16.0/bin/npm pnpm: Not Found Browsers: Chrome: 128.0.6613.85 Edge: Not Found Safari: 17.6 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: 11.13.0 @mui/base: ^5.0.0-beta.58 => 5.0.0-beta.58 @mui/core-downloads-tracker: 6.0.0 @mui/icons-material: ^6.0.0 => 6.0.0 @mui/lab: ^6.0.0-beta.8 => 6.0.0-beta.8 @mui/material: ^6.0.0 => 6.0.0 @mui/material-nextjs: ^6.0.0 => 6.0.0 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.7 @mui/types: 7.2.16 @mui/utils: 5.16.6 @mui/x-data-grid-pro: ^7.14.0 => 7.14.0 @mui/x-date-pickers: ^7.14.0 => 7.14.0 @mui/x-internals: 7.14.0 @mui/x-license: 7.14.0 react: rc => 19.0.0-rc-f90a6bcc-20240827 react-dom: rc => 19.0.0-rc-f90a6bcc-20240827 styled-components: 6.1.12 types-react: 19.0.0-rc.1 typescript: ^5.5.4 => 5.5.4 ```

Search keywords: v6, next.js, hydration

siriwatknp commented 3 weeks ago

@arklanq-patronus I could not reproduce it locally with the exact same code that you provided. Do you encounter this issue locally too?

This is the version of the packages I used:

  "dependencies": {
    "@emotion/react": "11.13.3",
    "@emotion/server": "11.11.0",
    "@emotion/styled": "11.13.0",
    "@mui/material": "6.0.1",
    "@mui/material-nextjs": "6.0.1",
    "next": "14.2.7",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "typescript": "^5"
  }

ddolcimascolo commented 3 weeks ago

Not sure if that's the same issue, but on a very quick try with v6 it looks like all my defaultProps customizations in the theme are simply ignored... Looks similar to what OP is seeing. This is an SPA without Next.js.

Do you want me to open a new issue ?

arklanq-patronus commented 3 weeks ago

As MUI 6.0.1 was released yesterday I have prepared one more devbox to test:

@siriwatknp

Go to selected devbox -> click rectangle in top left corner -> download devbox.
Launch downloaded devbox in your IDE, install deps with pnpm (npm works as well), run dev script.
Observe hydration error.

siriwatknp commented 3 weeks ago

Not sure if that's the same issue, but on a very quick try with v6 it looks like all my defaultProps customizations in the theme are simply ignored... Looks similar to what OP is seeing. This is an SPA without Next.js.

Do you want me to open a new issue ?

Yes, please (with a reproducible Sandbox).

siriwatknp commented 3 weeks ago

@arklanq-patronus The issue is gone if I changed the import:

-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';

Need to investigate further.

siriwatknp commented 3 weeks ago

As a workaround, please use consistent import throughout the app:

if you use import from @mui/material, you should use it for all of the components and theming:

import { ThemeProvider, createTheme } from '@mui/material';
// another file
import { Typography, Button } from '@mui/material';

direct import

import { ThemeProvider, createTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

Janpot commented 3 weeks ago

Started taking a look at this.

It seems like adding an explicit dependency to @mui/system@6.0.1 "solves" the issue as well. Likewise .npmrc with the node-linker=hoisted setting. Problem in Next.js module resolver?

~Will have to dig a little deeper. I'll keep this comment updated with my findings.~ Added a new comment to trigger a notification.

Janpot commented 3 weeks ago

@arklanq-patronus can you try with next@canary instead of next@rc? It seems like rc is already three months old, I can't reproduce it with canary (1 day old).

Just fyi because I noticed this in your package.json: the overrides key is not recognized by pnpm, it's either resolutions or pnpm.overrides

arklanq-patronus commented 2 weeks ago

@arklanq-patronus can you try with next@canary instead of next@rc? It seems like rc is already three months old, I can't reproduce it with canary (1 day old).

Just fyi because I noticed this in your package.json: the overrides key is not recognized by pnpm, it's either resolutions or pnpm.overrides

Here is a new devbox:

\<CodeSandbox>

Updated MUI from 6.0.1 to 6.0.2 <-- didn't help
Fixed pnpm overrides, thanks @Janpot for the clue! <-- didn't help
Updated Next from rc to canary <-- bingo!

I can confirm that the issue is gone. It looks like the next RC version has some nasty bug. Thank you mates for help 🤝.

github-actions[bot] commented 2 weeks ago

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] We value your feedback @arklanq-patronus! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

mui / material-ui