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

Answer 1

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"

Answer 2

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.