React-admin: Huge Icons and Messed Up CSS After Building and Deploying

[jonmpan]

What you were expecting:

This app is a full stack PERN app (pgsql, express, react, node). After building and logging into the app, everything looks fine.

What happened instead:

Upon any subsequent reload, whether it's going to the url or hitting refresh, this happens. The icons get huge and all the styling gets busted.

Steps to reproduce:

Build a full PERN stack app, build, and deploy it.

Environment

• React-admin version: "^2.6.0"
• React version: "^16.6.0"
• Browser: Chrome

[fzaninotto]

Hi, and thanks for reporting the issue.

We can't replicate it (see https://marmelab.com/react-admin-demo/, which is developped with react-admin 2.6, built, and deployed on a CDN). Without further details about your problem (console errors, CodeSandbox), we won't be able to fix it. Can you please help us reproduce your issue?

[jonmpan]

Hello,

There was some dependency differences between our project and your demo. I matched the dependencies to be identical to the demo and also removed all dependencies that may have Materialize in them which included react google login. After that, the page is rendering correctly.

Thank you for your response,
Jon

[edgardz]

Something similar is happening to me after building.
The admin interface seems broken, see:

I need to logout and login in order for things to work properly.

[djhi]

@edgardz Please double check your dependencies versions (especially material-ui core and icons). If still reproduce this issue then please provide a codesandbox to help debugging it

[edgardz]

Yeah!
After downgrading material-ui to the versions below, it is now working great.

"@material-ui/core": "~1.4.0",
"@material-ui/icons": "~1.1.0",

Thank you very much @djhi

[jbeurel]

I've the same red text color and big icons bug.

I fix the version like @edgardz but that does not change anything.

"dependencies": {
    "@api-platform/admin": "^0.6.2",
    "@material-ui/core": "~1.4.0",
    "@material-ui/icons": "~1.1.0",
    "auth0-js": "^9.10.0",
    "connected-react-router": "^4.5.0",
    "foreman": "^3.0.1",
    "graphql": "^14.1.1",
    "history": "^4.7.2",
    "jwt-decode": "^2.2.0",
    "normalizr": "^3.3.0",
    "react": "^16.7.0",
    "react-admin": "^2.6.3",
    "react-dom": "^16.7.0",
    "react-intl": "^2.8.0",
    "react-redux": "^5.0.7",
    "react-relay": "^1.7.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.1.3",
    "redux": "^4.0.1",
    "redux-form": "^8.1.0",
    "redux-persist": "^5.10.0",
    "redux-saga": "^0.16.1",
    "relay-compiler": "^1.7.0",
    "relay-runtime": "^1.7.0",
    "reselect": "^4.0.0",
    "save-dev": "^2.0.0",
    "styled-components": "^3.4.9",
    "superagent": "^4.1.0"
  },

[roychoo]

@jbeurel i have the same issue, did you resolve it?

[roychoo]

for anyone here, it is due to conflict of classnames stated in this thread https://github.com/mui-org/material-ui/issues/8223, and i use generateClassName from @material-ui/core/styles to add a prefix

[jbeurel]

Hi @roychoo Could you copy/paste some code example of your workaround?

[roychoo]

https://material-ui.com/customization/css-in-js/#creategenerateclassname-options-class-name-generator @jbeurel in the examples of this link

Sorry was on the road, hard to paste the code

Here it is

import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  dangerouslyUseGlobalCSS: true,
  productionPrefix: 'c',
});

function App() {
  return (
    <JssProvider generateClassName={generateClassName}>
      ...
    </JssProvider>
  );
}

export default App;