React babel issue on reload

[tiaanswart]

I am currently experiencing this issue with a fresh install of zero running a JSX file:

bundle.js:6450 Warning: Prop `className` did not match. Server: "MuiListItem-root Navigator-firebase-1387 Navigator-item-1385 Navigator-itemCategory-1386 MuiListItem-gutters" Client: "MuiListItem-root Navigator-firebase-25 Navigator-item-23 Navigator-itemCategory-24 MuiListItem-gutters" warningWithoutStack @ bundle.js:6450

I used a simple template from Material UI.

Initial load is fine, subsequent loads or reloads produces the above error in the console.

From investigation I believe this is an issue with babel, similar to this issue:

vercel/next.js#7322

Any help would be appreciated.

[asadm]

I will have a look in some time. If you can, please share the repo so I can reproduce this quickly.

[tiaanswart]

Sweet I used the code from this repo:

https://themes.material-ui.com/themes/paperbase/

https://github.com/mui-org/material-ui/tree/master/docs/src/pages/premium-themes/paperbase

[tiaanswart]

While playing around again with the code I realised that after changing and saving a file the live reload / rebuild also seems to fix the issue. This is definitely something to do with the bundeler.

[futurfutur]

Have you found any solution so far? I'm facing the same problem while using material-ui with following babel config:
styled-components/babel-plugin-styled-components#78 (comment)

[asadm]

@futurfutur Can you share an example repro so I can debug this? The following "hello world" of material-ui works fine:

import React from 'react';
import Button from '@material-ui/core/Button';

const App = () => (
  <Button variant="contained" color="primary">
    Hello World
  </Button>
);

export default App

[futurfutur]

@asadm Thanks for your reply! Here's a project with Next and MUI
https://github.com/futurfutur/next-mui

After run ' yarn dev' app loads without errors, but on page refresh I've got following error:

Warning: Prop className did not match. Server: "MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-928 makeStyles-hide-929 MuiIconButton-colorInherit MuiIconButton-edgeStart" Client: "MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-7 makeStyles-hide-8 MuiIconButton-colorInherit MuiIconButton-edgeStart"

The problem's gone if I change import to dynamic import in _app.tsx (in that way SSR is disabled).