gatsby: Server-side-rendered styles are missing and/or incorrect

Description

I’ve built multiple sites/apps with Gatsby already, but that’s the first time I encounter such an issue.

I’m working on an app based on Gatsby and Material UI.

GitHub issues reporting similar, but not the same behavior that I reviewed and tested #9911, #12360, #5100, #3741.

GIF/recording of the issue https://monosnap.com/file/gQ7jH0YQ4O39LpHhL8DOL40eufnbbY

Sometimes, on initial page load (server-side-rendered per my understanding) the styles get totally messed up. This does not happen on subsequent (client-side) rendered pages, but only on the initial page load. Unfortunately, it occurs randomly and not on every build.

Setup The setup of Gatsby and Material UI is based on MUI’s official Gatsby example. In short, gatsby-plugin-material-ui and changes to gatsby-browser.js and gatsby-ssr.js

This very same setup, as described in the GH project itself, works perfectly fine on other projects. Therefore, I speculate there’s something that we’re missing.

• We do not use styled-components or any similar CSS-in-JS library and such doesn’t exist in package.json
• The only .css files we have are placed at the top of gatsby-browser.js like this

import 'slick-carousel/slick/slick-theme.css';
import 'slick-carousel/slick/slick.css';
import '~components/bar-bat-mitzvah/raleway-font.css';

• I tested using the gatsby-plugin-material-ui’s option for injectFirst as described here, but without any success.
• Clearing all “Site Data” from the Developer Tools console seems to fix the issue which might be a hint to something wrong with cached styles by the gatsby-plugin-offline
• In addition, I tested many of the solutions in the mentioned GH issues, but none of these worked.

Steps to reproduce

Unfortunately, I can’t grant access to the project’s repository. I have the very same project setup as GH repository that I’m sharing for reference.

• Developing and browsing the app locally using gatsby develop works perfectly fine.
• Building using gatsby build passes just fine too. No warnings or errors.
• Serving using gatsby serve serves the already built files. However, styles get messed up as described in this issue.

Expected result

It’s expected to load any styles properly on both initial and subsequent renders.

Actual result

The styles on initial-render get messed up and/or are corrupted. Please check the video recording at the top of the issue.

Environment

# gatsby info --clipboard
  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.13.0 - ~/.yarn/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Languages:
    Python: 2.7.13 - /usr/local/bin/python
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.1
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.13.11 => 2.15.14 
    gatsby-plugin-create-client-paths: ^2.1.3 => 2.1.7 
    gatsby-plugin-facebook-pixel: ^1.0.3 => 1.0.3 
    gatsby-plugin-google-analytics: ^2.0.6 => 2.1.16 
    gatsby-plugin-mailchimp: ^5.1.0 => 5.1.2 
    gatsby-plugin-manifest: ^2.0.4 => 2.2.16 
    gatsby-plugin-material-ui: ^2.0.1 => 2.1.6 
    gatsby-plugin-nprogress: ^2.1.0 => 2.1.6 
    gatsby-plugin-offline: ^2.0.5 => 2.2.10 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.1.7 
    gatsby-plugin-robots-txt: ^1.3.0 => 1.5.0 
    gatsby-plugin-root-import: ^2.0.5 => 2.0.5 
    gatsby-plugin-s3: 0.3.1 => 0.3.1 
    gatsby-plugin-sitemap: ^2.0.1 => 2.2.12 
    gatsby-plugin-webpack-size: 1.0.0 => 1.0.0 
    gatsby-source-prismic: 2.3.0-alpha.6 => 2.3.0-alpha.6 

---

Thank you for spending the time to look into this!