Using Material UI + NextJS: "Prop did not match. Server: Client:" #4249

kutsyk · 2018-05-02T07:32:10Z

Expected Behavior

Works without problem.

Current Behavior

Errors with "material-ui": "^1.0.0-beta.44" and "next": "^6.0.0" tried a lot of configuration with .babelrc doesn't work as expected.
When I'm using material-ui component MuiThemeProvider and refresh page using browser refresh not all component are rendered properly and in console there is next warning:
Warning: Prop 'className' did not match. Server: "MuiTypography-root-246 MuiTypography-title-252 MuiTypography-colorInherit-265 PageComponent-flex-207" Client: "MuiTypography-root-44 MuiTypography-title-50 MuiTypography-colorInherit-63 PageComponent-flex-5"

Steps to Reproduce (for bugs)

Page component wich is container for whole app:

import React from 'react'
import PropTypes from 'prop-types'
import Head from 'next/head'
import Document from 'next/document'
import NavigationBottom from './navigation/bottom'
import { MuiThemeProvider, createMuiTheme, withStyles } from 'material-ui/styles'
import { Hidden } from 'material-ui'

import AppBar from 'material-ui/AppBar'
import Toolbar from 'material-ui/Toolbar'
import Typography from 'material-ui/Typography'
import IconButton from 'material-ui/IconButton'
import Link from 'next/link'
import Drawer from 'material-ui/Drawer'
import Divider from 'material-ui/Divider'
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import { inherits } from 'util'

import { MenuList, MenuItem } from 'material-ui/Menu';
import PeopleIcon from '@material-ui/icons/People'
import FavoriteIcon from '@material-ui/icons/Favorite'
import Help from '@material-ui/icons/Help'
import blue from 'material-ui/colors/blue';

const muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#32be9e'
    }
  }
})

const drawerWidth = 210

const styles = theme => ({
  root: {
    flexGrow: 1,
    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    color: '#32be9e',
    backgroundColor: 'white'
  },
  drawerPaper: {
    position: 'relative',
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing.unit * 3,
    minWidth: 0, // So the Typography noWrap works
  },
  flex: {
    flex: 1
  },
  toolbar: theme.mixins.toolbar,
});

class PageComponent extends Document {
  static propTypes = {
    isServer: PropTypes.bool,
    title: PropTypes.string.isRequired,
    children: PropTypes.element.isRequired,
    classes: PropTypes.object.isRequired
  }

  static defaultProps = {
    navigationVisible: true
  }

  computedHeadTitle() {
    return this.props.title ? `${this.props.title} | Cureety` : 'Cureety'
  }

  render() {
    let { classes, navigationVisible } = this.props
    return (
      <MuiThemeProvider theme={createMuiTheme({
        palette: {
          primary: blue,
        },
      })} >
        <Head>
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
          <title>{this.computedHeadTitle()}</title>
          <link rel='stylesheet' href='/static/custom.css' />
        </Head>
        <div className={classes.root}>
          <AppBar position="absolute" className={classes.appBar}>
            <Toolbar>
              <Typography variant="title" color="inherit" className={classes.flex}>
                <Link href="/">
                  <a className="link-styleless">Cureety</a>
                </Link>
              </Typography>
              <Link href="/help">
                <IconButton
                  aria-haspopup="true"
                  color="inherit"
                  tooltip="Assistance">
                  <Help />
                </IconButton>
              </Link>
            </Toolbar>
          </AppBar>
          <Hidden only={['xs']}>
            {navigationVisible > 0 &&
              <Drawer
                variant="permanent"
                classes={{
                  paper: classes.drawerPaper,
                }}>
                <div className={classes.toolbar} />
                <MenuList>
                  <Link href="/suivi">
                    <MenuItem>
                      <ListItemIcon>
                        <FavoriteIcon />
                      </ListItemIcon>
                      <ListItemText inset primary="Mon suivi" />
                    </MenuItem>
                  </Link>
                  <Link href="/profile">
                    <MenuItem>
                      <ListItemIcon>
                        <PeopleIcon />
                      </ListItemIcon>
                      <ListItemText inset primary="Mon profile" />
                    </MenuItem>
                  </Link>
                </MenuList>
                <Divider />
                <List></List>
              </Drawer>
            }
          </Hidden>

          <main className={classes.content}>
            <div className={classes.toolbar} />
            <Typography noWrap component="div">
              <div>
                {this.props.children}
              </div>
            </Typography>
          </main>
          {navigationVisible > 0 &&
            <Hidden only={['sm', 'md', 'lg', 'xl']}>
              <NavigationBottom />
            </Hidden>
          }
        </div>
      </MuiThemeProvider>
    )
  }
}

const Page = withStyles(styles)(PageComponent)

export default Page

Context

Your Environment

Tech	Version
next	^6.0.0
node	v8.9.3
OS	Windows 10
browser	Chrome Version 66.0.3359.139 (Build officiel) (64 bits)
etc

Connected issue, said to move question to another issue: #3983

The text was updated successfully, but these errors were encountered:

fredsh · 2018-05-04T05:49:50Z

Hello, I am facing the same issue.
If that can help for investigation:

the problem appears only in dev mode (works fine in production build)
there is a problem only if the theme provider is inside the new _app.js file (if I create a wrapper HOC and put it around each page instead there is no issue)

oliviertassinari · 2018-05-04T14:59:45Z

Did you start from https://github.com/mui-org/material-ui/tree/master/examples/nextjs?

fredsh · 2018-05-04T19:37:09Z

@oliviertassinari thank you for your reply. yes I actually used the wrapper withRoot from the example before v6 was released.
The new _app.js seems like the right place for applying the theme to all pages so I move the logic in there. It actually works well except for the initial render from server. The classnames are not matching and therefore the app is not styled. If a state change is triggered inside _app, then the re-render has correct classnames and style is applied correctly.
I was not facing any issue before moving the logic to _app.js
From my understanding, _app.js seems like the right place to do this as it applies to all pages.
Is there something that would need to be changed compared to the example to get it working in _app?

I would be glad to help fix the issue if I can but I am not quite sure where to start looking at for debugging this.

oliviertassinari · 2018-05-05T10:05:42Z

@fredsh Follow mui/material-ui#11209 then.

mpint · 2018-05-07T00:51:36Z

I was stuck on this for some time because I had overlooked the (very important) getInitialProps method in https://github.com/mui-org/material-ui/blob/v1-beta/examples/nextjs/pages/_document.js. Don't be like me.

Tapppi · 2018-05-07T04:25:14Z

Although @mpint did indeed find the reason for the error, there still remains the flickering issue @fredsh mentioned when using _app.js to inject MuiThemeProvider and styles. Fix is in #4288

kutsyk · 2018-05-08T17:50:23Z

Hey guys,
I fixed my solution adding implementation as in example.

Everything worked.
I enabled ssr: true again in my babel configurations and overided _document.js after that no problems with styles.
I have not implemented logic withRoot in my solution, I am just using my component as root element for pages. Is it bad for performance?

Tapppi · 2018-05-08T21:39:08Z

@kutsyk withRoot is just a Higher Order Component (HOC) to isolate the logic in a single place to keep your code DRY and ease maintenance. I would advice you to use a HOC unless you have a compelling reason not to, but it should not affect performance.

Tevinthuku · 2018-05-18T08:03:16Z

Im still getting the same issue. Any recommended fix

gleb-svechnikov · 2018-08-31T16:05:21Z

@kutsyk link to the example returns 404. Could you provide working example?

timneutkens · 2018-08-31T19:12:45Z

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

timneutkens · 2018-08-31T19:14:28Z

Let's close this issue as it has been solved #4249 (comment)

Otherwise: Warning: Prop `className` did not match. Server: "MuiSvgIcon-root-53" Client: "MuiSvgIcon-root-1" vercel/next.js#4249 (comment)

offero · 2019-02-22T17:59:29Z

I would love to see a write up explaining what is going on with the nextjs example. _app.js, _document.js, and getPageContext.js files are all custom built to make sure Material UI can be themed properly in next.

I'm try to learn next, react, and material-ui and the things that are happening in those files are like magic at the moment.

oliviertassinari · 2019-02-23T00:21:35Z

@offero I personally wish we could wrap all the logic in a plugin so people don't have to worry about it.

garrett-thompson · 2019-05-20T19:24:23Z

Any update on this? I really have no idea what's going on in that example. It seems this is only a problem when using the Next dev server when loading changes.

cabralada · 2019-08-11T22:30:38Z

Hey guys,
I fixed my solution adding implementation as in example .

Everything worked.
I enabled ssr: true again in my babel configurations and overided _document.js after that no problems with styles.
I have not implemented logic withRoot in my solution, I am just using my component as root element for pages. Is it bad for performance?

page not found!

timneutkens · 2019-08-11T22:33:34Z

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

edgarcheverier · 2020-01-31T08:49:29Z

Following this article, I managed to make it work but isn't straight forward, I hope it can help someone.
https://medium.com/manato/ssr-with-next-js-styled-components-and-material-ui-b1e88ac11dfa

francisrod01 · 2020-07-28T16:58:44Z

I can't see this solved even with the simplistic material-ui example for next.js apps.

This issue occurs only when I enable the reactStrictMode in a next.config.js file.
If I rename this file, the app will run without any errors in styles, but I need this to set my environment variables before the application running.

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Here's a preview of the provided app's example in StrictMode.

Related:

balazsorban44 · 2022-01-29T08:06:33Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Tapppi mentioned this issue May 7, 2018

Wrap app component with enhancer when rendering #4288

Closed

jasonleibowitz mentioned this issue May 27, 2018

Styles Break on iOS with Material UI AppBar #4485

Closed

timneutkens closed this as completed Aug 31, 2018

zbycz added a commit to zbycz/osmapp that referenced this issue Jan 19, 2019

dev: use MUI next example

728e4f7

Otherwise: Warning: Prop `className` did not match. Server: "MuiSvgIcon-root-53" Client: "MuiSvgIcon-root-1" vercel/next.js#4249 (comment)

zbycz added a commit to zbycz/osmapp that referenced this issue Jan 19, 2019

dev: use MUI next example

1217232

Otherwise: Warning: Prop `className` did not match. Server: "MuiSvgIcon-root-53" Client: "MuiSvgIcon-root-1" vercel/next.js#4249 (comment)

zbycz added a commit to zbycz/osmapp that referenced this issue Jan 24, 2019

dev: use MUI next example

07f4727

Otherwise: Warning: Prop `className` did not match. Server: "MuiSvgIcon-root-53" Client: "MuiSvgIcon-root-1" vercel/next.js#4249 (comment)

zbycz added a commit to zbycz/osmapp that referenced this issue Jan 29, 2019

dev: use MUI next example

5e4dffe

Otherwise: Warning: Prop `className` did not match. Server: "MuiSvgIcon-root-53" Client: "MuiSvgIcon-root-1" vercel/next.js#4249 (comment)

This comment has been minimized.

Sign in to view

michael-james-holloway mentioned this issue Aug 15, 2019

[examples] Crash in Next JS Example When Injecting Head mui/material-ui#16962

Closed

2 tasks

ercgrat mentioned this issue Oct 15, 2020

Next.js dev environment variables overwritten with production values by netlify dev netlify/cli#1386

Closed

vercel locked as resolved and limited conversation to collaborators Jan 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using Material UI + NextJS: "Prop did not match. Server: Client:" #4249

Using Material UI + NextJS: "Prop did not match. Server: Client:" #4249

kutsyk commented May 2, 2018

fredsh commented May 4, 2018

oliviertassinari commented May 4, 2018 •

edited

Loading

fredsh commented May 4, 2018

oliviertassinari commented May 5, 2018

mpint commented May 7, 2018 •

edited

Loading

Tapppi commented May 7, 2018

kutsyk commented May 8, 2018

Tapppi commented May 8, 2018

Tevinthuku commented May 18, 2018

gleb-svechnikov commented Aug 31, 2018

timneutkens commented Aug 31, 2018

timneutkens commented Aug 31, 2018

offero commented Feb 22, 2019

oliviertassinari commented Feb 23, 2019

garrett-thompson commented May 20, 2019

This comment has been minimized.

cabralada commented Aug 11, 2019

timneutkens commented Aug 11, 2019

edgarcheverier commented Jan 31, 2020

francisrod01 commented Jul 28, 2020 •

edited

Loading

balazsorban44 commented Jan 29, 2022

Using Material UI + NextJS: "Prop did not match. Server: Client:" #4249

Using Material UI + NextJS: "Prop did not match. Server: Client:" #4249

Comments

kutsyk commented May 2, 2018

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

Context

Your Environment

fredsh commented May 4, 2018

oliviertassinari commented May 4, 2018 • edited Loading

fredsh commented May 4, 2018

oliviertassinari commented May 5, 2018

mpint commented May 7, 2018 • edited Loading

Tapppi commented May 7, 2018

kutsyk commented May 8, 2018

Tapppi commented May 8, 2018

Tevinthuku commented May 18, 2018

gleb-svechnikov commented Aug 31, 2018

timneutkens commented Aug 31, 2018

timneutkens commented Aug 31, 2018

offero commented Feb 22, 2019

oliviertassinari commented Feb 23, 2019

garrett-thompson commented May 20, 2019

This comment has been minimized.

cabralada commented Aug 11, 2019

timneutkens commented Aug 11, 2019

edgarcheverier commented Jan 31, 2020

francisrod01 commented Jul 28, 2020 • edited Loading

balazsorban44 commented Jan 29, 2022

oliviertassinari commented May 4, 2018 •

edited

Loading

mpint commented May 7, 2018 •

edited

Loading

francisrod01 commented Jul 28, 2020 •

edited

Loading