Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React babel issue on reload #113

Open
tiaanswart opened this issue Jan 7, 2020 · 6 comments
Open

React babel issue on reload #113

tiaanswart opened this issue Jan 7, 2020 · 6 comments

Comments

@tiaanswart
Copy link

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
Copy link
Contributor

asadm commented Jan 8, 2020

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

@tiaanswart
Copy link
Author

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
Copy link

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
Copy link
Contributor

asadm commented Jan 27, 2020

@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
Copy link

@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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants