React Admin displays very messed up

Question

My RA project renders fine when deploying locally, however, when I copy my build directory to an S3 bucket for deployment, it renders all messed up. Sometimes it works, but most of the time it renders like the below image. It works fine in both environments with AOR.

Environment

React-admin version:2.0.3 Last version that did not exhibit the issue (if applicable): React version:16.4.1 Browser:Chrome/Safari

Answer 1

There is an issue with the production build if you have a different version of @material-ui in your dependencies. And it will be fixed in the next version.

Here is the full issue: https://github.com/marmelab/react-admin/issues/1782

Meanwhile, you can write a workaround (also available in the issue): write your own class generator for JSS.

const escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
let classCounter = 0;

// Heavily inspired of Material UI:
// @see https://github.com/mui-org/material-ui/blob/9cf73828e523451de456ba3dbf2ab15f87cf8504/src/styles/createGenerateClassName.js
// The issue with the MUI function is that is create a new index for each
// new `withStyles`, so we handle have to write our own counter
export const generateClassName = (rule, styleSheet) => {
    classCounter += 1;

    if (process.env.NODE_ENV === 'production') {
        return `c${classCounter}`;
    }

    if (styleSheet && styleSheet.options.classNamePrefix) {
        let prefix = styleSheet.options.classNamePrefix;
        // Sanitize the string as will be used to prefix the generated class name.
        prefix = prefix.replace(escapeRegex, '-');

        if (prefix.match(/^Mui/)) {
            return `${prefix}-${rule.key}`;
        }

        return `${prefix}-${rule.key}-${classCounter}`;
    }

    return `${rule.key}-${classCounter}`;
};

And wrap the admin with a JSSProvider:

import JssProvider from 'react-jss/lib/JssProvider';

export default () => (
    <JssProvider generateClassName={generateClassName}>
        <Admin />
    </JssProvider>
);

It should fix your CSS issue, if it's related to JSS classes minification and Material-UI.

Answer 2

Thanks so much @Kmaschta saved me hours of searching.

I was not only getting the issue shown above... but when I hit the chrome refresh, the application would reload on the far left of the browser with no means of getting there.

I looked at the react-admin issue above react-admin 1782 which was an issue with the dependency given in package.json and internal @material-ui dependency of react-admin

I am editing my answer to show the dependencies with latest versions due to @material-ui 12621 :

@material-ui/core": "1.5.1",

"@material-ui/icons": "1.1.0",

"react-admin": "2.2.3",

"react": "16.4.2",

"react-dom": "16.4.2"