Material UI Styles are broken in Production

[raphaelschnaitl]

Description

The Material UI Styles are applied to the wrong components on the 2nd render.

Steps to reproduce

Clone the Repo here: https://github.com/Console32/BrokenCss run npm i && npm run build && npm run serve

Expected result

Styles are applied to the correct components

Actual result

index.js

  <React.Fragment>
    <Box>
      <GatsbyImage fluid={data.file.childImageSharp.fluid}
                   />
    </Box>

Header.js

....
    <LaptopAndWider>
              {data.dataJson.navigationPrimary.map(x =>
                <Button key={x.title} component={Link} to={x.path} color="inherit" underline={"none"}>
                  <Box height="70" alignItems="center" justifyContent="center" display="flex">
                    <Typography variant={"h6"}>
                      {x.title}
                    </Typography>
                  </Box>
                </Button>
              )}
....

A style from one button is applied to the Box around the Image:

After navigating to page A and back to TITLE the page works as expected:

Environment

System: OS: macOS 10.15.6 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 14.8.0 - ~/.nvm/versions/node/v14.8.0/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 6.14.8 - ~/.nvm/versions/node/v14.8.0/bin/npm Languages: Python: 3.8.5 - /usr/local/bin/python Browsers: Safari: 14.0 npmPackages: gatsby: ^2.24.63 => 2.24.63 gatsby-image: ^2.4.19 => 2.4.19 gatsby-plugin-emotion: ^4.3.11 => 4.3.11 gatsby-plugin-layout: ^1.3.11 => 1.3.11 gatsby-plugin-mdx: ^1.2.40 => 1.2.40 gatsby-plugin-react-helmet: ^3.3.11 => 3.3.11 gatsby-plugin-robots-txt: ^1.5.2 => 1.5.2 gatsby-plugin-sharp: ^2.6.36 => 2.6.36 gatsby-plugin-sitemap: ^2.4.13 => 2.4.13 gatsby-remark-images: ^3.3.30 => 3.3.30 gatsby-source-filesystem: ^2.3.30 => 2.3.30 gatsby-theme-material-ui: ^1.0.13 => 1.0.13 gatsby-theme-material-ui-top-layout: ^1.0.3 => 1.0.3 gatsby-transformer-json: ^2.4.12 => 2.4.12 gatsby-transformer-remark: ^2.8.35 => 2.8.35 gatsby-transformer-sharp: ^2.5.15 => 2.5.15

[raphaelschnaitl]

migrated from https://github.com/gatsbyjs/gatsby/issues/26991

[adonig]

Same problem here. It seems like SSR styles are fine while CSR styles are broken. There was no new version of gatsby-theme-material-ui recently, so it might be an issue with a new version of gatsby. Here is the gatsby changelog:

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/CHANGELOG.md

[raphaelschnaitl]

I have the same Material UI Theme setup in another solution (equal version of gatsby) where everything works as expected. Also did create a SO Question, but without luck.

Will try to find out what difference between the projects causes the Problems.

[adonig]

@Console32 I was able to fix the issue by downgrading Preact to 10.4.8

[raphaelschnaitl]

@adonig can you share your packages? I do not use preact.

[adonig]

@Console32

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Shell: 5.0.18 - /usr/local/bin/bash
  Binaries:
    Node: 14.8.0 - ~/.nvm/versions/node/v14.8.0/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v14.8.0/bin/npm
  Languages:
    Python: 2.7.17 - /Users/asd/.pyenv/shims/python
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 81.0
    Safari: 14.0
  npmPackages:
    gatsby: ^2.24.65 => 2.24.65
    gatsby-awesome-pagination: ^0.3.6 => 0.3.6
    gatsby-image: ^2.4.19 => 2.4.19
    gatsby-plugin-csv-feed: ^2.0.0 => 2.0.0
    gatsby-plugin-force-trailing-slashes: ^1.0.4 => 1.0.4
    gatsby-plugin-google-tagmanager: ^2.3.12 => 2.3.12
    gatsby-plugin-guess-js: ^1.3.12 => 1.3.12
    gatsby-plugin-manifest: ^2.4.31 => 2.4.31
    gatsby-plugin-material-ui: ^2.1.10 => 2.1.10
    gatsby-plugin-node-fields: ^3.1.0 => 3.1.0
    gatsby-plugin-offline: ^3.2.28 => 3.2.28
    gatsby-plugin-preact: ^4.0.12 => 4.0.12
    gatsby-plugin-preconnect: ^1.1.54 => 1.1.54
    gatsby-plugin-react-helmet: ^3.3.11 => 3.3.11
    gatsby-plugin-react-helmet-canonical-urls: ^1.4.0 => 1.4.0
    gatsby-plugin-remove-generator: ^1.0.6 => 1.0.6
    gatsby-plugin-robots-txt: ^1.5.3 => 1.5.3
    gatsby-plugin-s3: ^0.3.5 => 0.3.5
    gatsby-plugin-sharp: ^2.6.36 => 2.6.36
    gatsby-plugin-sitemap: ^2.4.13 => 2.4.13
    gatsby-plugin-ts-config: ^1.0.0 => 1.0.0
    gatsby-plugin-typescript: ^2.4.20 => 2.4.20
    gatsby-plugin-web-vitals: ^1.0.3 => 1.0.3
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.12 => 1.1.12
    gatsby-remark-images: ^3.3.30 => 3.3.30
    gatsby-source-filesystem: ^2.3.30 => 2.3.30
    gatsby-theme-material-ui: ^1.0.13 => 1.0.13
    gatsby-transformer-csv: ^2.3.11 => 2.3.11
    gatsby-transformer-remark: ^2.8.35 => 2.8.35
    gatsby-transformer-sharp: ^2.5.15 => 2.5.15

EDIT: Looks like gatsby info doesn't include all packages. Here's a gist: https://gist.github.com/adonig/77b9872b38042af1a81aea115369b9ef

[adonig]

Today there was an update for gatsby-plugin-preact (4.0.13) and now everything works with preact 10.5.3. For me it looks like my problem might be completely unrelated to gatsby-theme-material-ui. It looks like I upgraded preact too early and that somehow caused the client-side rendering to break.

I still don't understand why it doesn't work if you don't use preact. Maybe we have two different problems that look alike.

[raphaelschnaitl]

Odd, looks like that we have two different problems.

[raphaelschnaitl]

After another 10 Hours pinning down the issue i found out what was the problem. I have a component which is called LaptopAndWider. This component uses MediaQuery from react-responsive to implement hiding things on different screen sizes. The SSR did therefore never render the Material UI Components below LaptopAndWider, which resulted in missing styles. CSR did work, which is why after navigating back and forth the correct styles where applied.

Replacing MediaQuery from react-responsive with Hidden from material-ui solves the problem

[oliviertassinari]

@Console32 Mind that Next.js DX for solving this type of problem is a LOT better (as they SSR in dev mode, Gatsby only SSR in production).