3

This is a pretty hard question to explain. I am using a fairly basic webpack react + redux + router setup. Within that setup I only use material-ui@1.0.0-beta.43 as user interface package. On the side there is also some additional scss styling. All packages are up to date.

In a development environment this all works as expected. However when it is compiled with NODE_ENV set to production the styling becomes really weird. I have checked the webpack config difference between production and development, but that did not solve anything. So somewhere in a package the environment somehow seems to break things.

Normal development Normal development

Production environment using <code>import { Grid } from 'material-ui'</code> in the root Production environment using import { Grid } from 'material-ui' in the root

Production environment using <code>import Grid from 'material-ui/es/Grid/Grid'</code> in the root Production environment using import Grid from 'material-ui/es/Grid/Grid' in the root

I honestly have no clue any more why it acts this way. In another project I have material-ui@1.0.0-beta.22 in production with react-create-app as base, which works all fine. Using beta 22 does also not solve the problem. Neither does downgrading to webpack 3 as used in react-create-app. I cannot seem to find any major differences which could lead to this result.

Would really appreciate if someone could shed some light on possible solutions.

Mikroware
  • 344
  • 2
  • 9

3 Answers3

9

5 hours of attempts before I posted this question and 1 hour after and I finally have figured out the cause. IntelliJ auto imported some material-ui/es parts of the package and those managed to totally break all the styling in production. Either mixing the two import locations or just using the /es import is probably the problem.

For me it is fixed now in production.

Mikroware
  • 344
  • 2
  • 9
  • 1
    Thank you! Wonder if there is a way to flag these sorts of issues earlier. Took me a few hours before I arrived here and had very little clue of why it wasn't working. – James Britton May 29 '18 at 13:47
  • I guess there is not really a way to efficiently explain such visual problems in words. It was also a challenge for me to try and find solutions as well as writing the question. Maybe you have some keywords that could help making it more findable? – Mikroware May 30 '18 at 14:46
  • Not really, it was very bizarre and confusing for me as it was only an issue when I created a production build. A lot of my UI elements appeared and then seemed to head off left of the screen. That might have just been my experience though. I'm no where near compitent enough in this area to understand quite what was causing it. – James Britton Jun 06 '18 at 17:27
  • #Mikrowave i am having a hard time understanding your solution and how to fix it on my production version, can you explain it a little bit more. Thank you – Abundance Oshianor Jul 27 '18 at 12:40
  • 1
    @AbundanceOshianor you are mixing import styles. For example using `import TextField from 'material-ui/TextField'` and `import TextField from 'material-ui/es/TextField'`. Notice how the last one is importing from the `/es` compiled versions. Which is what creates the problem it seems. So make sure you do not import anything from `material-ui/es`. – Mikroware Jul 30 '18 at 12:36
  • Any Updates for material ui new version? I don't have any `es` imports but it's still failing in NEXT – Shivam Sahil Jan 14 '22 at 00:57
  • @ShivamSahil I never encountered the problem again. You probably want to ask this question in a NEXT community. For example with server side rendering, it might need some extra material-ui configuration. – Mikroware Jan 15 '22 at 19:35
2

One workaround to use, 

import {createGenerateClassName} from 'react-jss'
const generateClassName = createGenerateClassName()

<JssProvider generateClassName={generateClassName}>
  <App1 />
</JssProvider>

@kof comment on github on the similiar issue

Eltaf Hussain
  • 3,071
  • 1
  • 14
  • 20
  • So you mean the source of this problem is due to some conflict in classnames when combining normal imports with `/es` imports? How does that explain the shifted and miss-formed layout in only production? – Mikroware Oct 10 '18 at 17:48
  • Yes, I had a similar issue, locally it was all good but the production version was messed up. – Eltaf Hussain Oct 11 '18 at 10:56
2

I had a similar issue. It was caused by a different order of stylesheets in dev and prod environments, causing unwanted overwrites. In dev env all stylesheets created by makeStyles() were injected after ALL MUI stylesheets, but in production they were mixed.

Solution:

Add an option: { index: 1 } to all makeStyles() invocations, in order to place those sheets after the MUI sheets which have an index of 0 (by default). This optional argument is passed directly to underlying JSS's jss.createStyleSheet() and dictates the injection order:

const useStyles = makeStyles(
  (...),         //  styles
  { index: 1 },  //  optional argument for JSS, to set position after MUI stylesheets
)

(after: https://stackoverflow.com/a/62646041/624597)

ellockie
  • 3,730
  • 6
  • 42
  • 44