16

I have big problems building my react-app.

I am using material-ui/core v.4.10.2 on the normal react-scripts start dev-server everything works perfectly.

But when built and served through Nginx or npm-module serve the rendering is not working correctly...

(I saw similar issues on the material-ui Github, but they were all (falsely) closed

Here is my package.json in case something's wrong with my dependencies (what I certainly don't think is the case)

{
  "name": "web_app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.10.2",
    "@material-ui/styles": "4.10.0",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/lab": "^4.0.0-alpha.45",
    "rc-color-picker": "^1.2.6",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-infinite-scroll-hook": "^2.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1",
    "tinycolor2": "^1.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@date-io/date-fns": "^1.3.11",
    "@material-ui/pickers": "^3.2.7",
    "@mui-treasury/styles": "^1.1.0",
    "@trendmicro/react-sidenav": "^0.4.5",
    "browserfs": "^1.4.3",
    "cronstrue": "^1.85.0",
    "date-fns": "^2.0.0-beta.5",
    "formik": "^2.1.4",
    "i18next": "^17.0.13",
    "i18next-browser-languagedetector": "^3.0.3",
    "i18next-xhr-backend": "^3.1.2",
    "lodash": "^4.17.15",
    "material-ui-confirm": "^2.0.4",
    "moment": "^2.24.0",
    "react-animated-slider": "^2.0.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-blur-image-loader": "^0.2.2",
    "react-digital-clock": "^0.1.2",
    "react-dropzone-uploader": "^2.10.1",
    "react-fine-uploader": "^1.1.1",
    "react-i18next": "^10.12.2",
    "react-image-lightbox": "^5.1.1",
    "react-picky-date-time": "^1.3.2",
    "react-router-dynamic-breadcrumbs": "^2.2.0",
    "react-sticky-el": "^2.0.5",
    "recompose": "^0.30.0",
    "store2": "^2.10.0",
    "tubular-react": "^4.1.31",
    "yup": "^0.28.4"
  }
}

Images of a View in Production-Version and Dev-Version

Image01

I don't know why, but a few minutes ago I also had the problem that the the header is even smaller as in this image, but I couldn't reproduce that right now... Sometimes it works better, sometimes less, but it's not suitable to get shipped like this sadly.

But in this GIF you see more issues like this: Animation

(In Dev-Mode there is not a single view that is not working...Only happens when building)

What I already tried

Nothing worked...sadly.

I hope that there is anybody that had similar issues. I saw someone opening an issue on MUI's Github, but like I said it's sadly closed

https://github.com/mui-org/material-ui/issues/21502

AmerllicA
  • 29,059
  • 15
  • 130
  • 154
Antax
  • 496
  • 6
  • 13
  • I won't be able to give out any source, because the whole app is pretty big. But https://github.com/mui-org/material-ui/issues/21502 has a example that's the same issue as mine – Antax Jun 19 '20 at 15:48
  • 2
    What makes you think that `material-ui` is the problem here? Are there any error messages in the developer console? – trixn Jun 19 '20 at 15:53
  • because https://github.com/mui-org/material-ui/issues/21502 has the same issue I'm not actually sure if MUI is the problem. No there are no Error messages in the console whatsoever – Antax Jun 19 '20 at 16:29
  • 1
    I recommend removing `"@material-ui/styles": "4.10.0",` from your dependencies. I also recommend creating the simplest possible version of your app (including simplifying package.json as much as possible) that still reproduces the problem. Then include both the package.json and the code necessary to reproduce the problem in your question. The GitHub issue was closed because Material-UI's issues are for bug reports and feature requests, not for support. Even if it ends up being a bug, it is a support request to ask MUI to do the work to determine whether the issue is in MUI or your own project. – Ryan Cogswell Jun 26 '20 at 15:25
  • Did yo fix your problem? Could you shares us the web console log? – JRichardsz Jun 28 '20 at 19:32
  • Try importing CSS at the beginning of your imports (right after import React) – harish kumar Jun 28 '20 at 19:32
  • Are you sure that your dev deps like `moment`, `lodash` etc in the right place? When you run `yarn run build` all dev dependencies will be ignored and won't be in production build. – PasVV Jun 29 '20 at 18:36

4 Answers4

34

I had the exact same issue. Turned out that Webpack would mess around with Material UI's rules of JSS precedence. You need to manually override the injection order using the index option.

In your makeStyles() or withStyles(), add {index: 1}:

//Hook
const useStyles = makeStyles({
    // your styles here
}, {index: 1})

// HOC 
MyComponent = withStyles({
    // your styles here
}, {index: 1})(MyComponent)
Mordechai
  • 15,437
  • 2
  • 41
  • 82
  • @Antex Did this help? – Mordechai Jul 01 '20 at 15:35
  • ```const useStyles = makeStyles({ // your styles here }, {index: 1})``` WORKS!!!!! – Antax Jul 02 '20 at 20:35
  • ```const styles = theme => ({ // your styles here }, {index: 1}); DOESN'T WORK!!! withStyles(styles) ``` – Antax Jul 02 '20 at 20:35
  • 1
    Added more detail to the answer – Mordechai Jul 03 '20 at 15:20
  • 1
    @Antax If this answered your question please go ahead and award the bounty. If you let it pass the grace period nobody will benefit from it. You will __not__ get back the rep. [See here](https://meta.stackexchange.com/questions/16065/how-does-the-bounty-system-work) – Mordechai Jul 03 '20 at 20:42
  • Sorry @Mordechai, I actually forgot to do this. I am very sorry - had too much to do and couldn't keep this post alive :(. I can see if i can give you a bounty extra – Antax Jul 05 '20 at 17:40
  • 3
    I logged into SO for the first time in 6 years just to tell you thanks for this!! – hdhdhdhdhdh Jan 02 '21 at 17:07
  • Thanks, there is also the little trick to add a property with ' !important' at the end. – Getzel Jun 24 '21 at 12:36
6

I had an issue with Appbar and Navigation drawer of material UI.

The #1 reason this likely happens is due to class name conflicts once your code is in a production bundle.

Accoring to Material UI FAQ (https://material-ui.com/getting-started/faq/), StylesProvider is the way to fix this. It worked for me! Here's what I did-

In my Layout component which has the Appbar, toolbar, navigation drawer, I enclosed the entire rendering code within

import { StylesProvider } from '@material-ui/core/styles';

    return (
        <StylesProvider injectFirst> 
            //rest of my code
            <div></div>
        </StylesProvider>
    );

You can follow the official example at https://material-ui.com/styles/api/#stylesprovider

Using "@material-ui/core": "^4.11.3","react": "^17.0.1",

Leena
  • 703
  • 1
  • 12
  • 21
0

Thanks @Mordechai for being the day saver.

@antax, the solution even works with theme. It seems u have messed up with the syntax.

makeStyles(theme => ({ /* your styles here */ }), {index: 1});  //WILL WORK!!!
Neha Ray
  • 1
  • 1
0

According to Material Ui, @mui/styles is deprecated. Instead use inline styling with sx={{ //your style }}

Saeid
  • 83
  • 8