Styling not loading correctly but working on refresh.

Description

In the deployed version of my application, whenever you first load the site (before it is stored in cache) the style is not applied correctly. Once, you reload (or it reloads automatically as we have bodge-fixed) it looks good. This occurs on mobile and browser.

Steps to reproduce

If you go to: https://5d41797b858ef10009855096--heuristic-booth-6cbb29.netlify.com

You will see it happens. If you want to reproduce it, clear your cache.

I have already tried to install the different packages and plug-ins a suggested on other posts.

gatsby-config.js

module.exports = {
  pathPrefix: `/mini-gatsbyv2-material-kit-react`,
  siteMetadata: {
    title: "Gatsby Default Starter",
  },
  plugins: [
    "gatsby-plugin-resolve-src",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-offline",
    {
      resolve: "gatsby-plugin-styled-components",
      options: {},
    },
    "gatsby-plugin-sass",
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "gatsby-starter-default",
        short_name: "starter",
        start_url: "/",
        background_color: "#663399",
        theme_color: "#663399",
        display: "minimal-ui",
        icon: "src/assets/img/favicon.png", // This path is relative to the root of the site.
      },
    },
  ],
}

package.json

{
  "name": "gatsby-starter-hello-world",
  "private": true,
  "description": "A simplified bare-bones starter for Gatsby",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.15",
    "@fortawesome/free-brands-svg-icons": "^5.7.2",
    "@fortawesome/free-solid-svg-icons": "^5.7.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.2",
    "babel-plugin-styled-components": "^1.10.6",
    "classnames": "^2.2.6",
    "core-js": "^2.6.5",
    "gatsby": "^2.1.24",
    "gatsby-plugin-manifest": "^2.0.22",
    "gatsby-plugin-offline": "^2.0.24",
    "gatsby-plugin-react-helmet": "^3.0.8",
    "gatsby-plugin-resolve-src": "^2.0.0",
    "gatsby-plugin-sass": "^2.0.10",
    "gatsby-plugin-styled-components": "^3.1.2",
    "history": "^4.7.2",
    "node-sass": "^4.11.0",
    "nouislider": "^13.1.1",
    "react": "^16.8.4",
    "react-datetime": "^2.16.3",
    "react-dom": "^16.8.4",
    "react-helmet": "^5.2.0",
    "react-icon": "^1.0.0",
    "react-icons": "^3.5.0",
    "react-router-dom": "^4.3.1",
    "react-slick": "^0.23.2",
    "react-swipeable-views": "^0.13.1",
    "styled-components": "^4.3.2",
    "typeface-roboto": "0.0.54",
    "typeface-roboto-slab": "0.0.72"
  },
  "devDependencies": {
    "prettier": "^1.16.4"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Gatsby info --clipboard

  System:
    OS: macOS 10.14.4
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.6.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.5.0 - /usr/local/bin/npm
  Languages:
    Python: 3.5.0 - /Users/afrancht/.pyenv/shims/python
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 67.0
    Safari: 12.1
  npmPackages:
    gatsby: ^2.1.24 => 2.13.41
    gatsby-plugin-manifest: ^2.0.22 => 2.2.4
    gatsby-plugin-offline: ^2.0.24 => 2.2.4
    gatsby-plugin-react-helmet: ^3.0.8 => 3.1.2
    gatsby-plugin-resolve-src: ^2.0.0 => 2.0.0
    gatsby-plugin-sass: ^2.0.10 => 2.1.3
    gatsby-plugin-styled-components: ^3.1.2 => 3.1.2
  npmGlobalPackages:
    gatsby-dev-cli: 2.5.7
    gatsby: 2.13.45

[lannonbr]

Hey @afrancht, so it seems I was able to fix your issue.

The issue was the material-ui styles were not being server-side rendered when running gatsby build which lead to the issue at hand of the wonky styles. That said, there is a plugin that brings SSR support to material UI.

Download it as such (you have to download v1.2.5 as newer versions support Material-UI v4, while your repo is still on v3):

yarn add gatsby-plugin-material-ui@1.2.5 # or npm install gatsby-plugin-material-ui@1.2.5

Then add it to the gatsby-config:

module.exports = {
  plugins: [
    `gatsby-plugin-material-ui`,
  ],
}

Then commit and push it up to Netlify and the issue should be resolved. I pushed up two versions of your site (one with the fix, one without), and I can confirm adding this plugin resolves this issue.

---

As an aside, I went over to the repo for starter you used, and I see there is an issue about this (https://github.com/WebCu/gatsby-material-kit-react/issues/12), so I am going to add some context to this and see if we can add this plugin into the starter directly so nobody has this problem anymore.

[bryan-yu]

Hey @afrancht, so it seems I was able to fix your issue.

The issue was the material-ui styles were not being server-side rendered when running gatsby build which lead to the issue at hand of the wonky styles. That said, there is a plugin that brings SSR support to material UI.

Download it as such (you have to download v1.2.5 as newer versions support Material-UI v4, while your repo is still on v3):

yarn add gatsby-plugin-material-ui@1.2.5 # or npm install gatsby-plugin-material-ui@1.2.5

Then add it to the gatsby-config:

module.exports = {
  plugins: [
    `gatsby-plugin-material-ui`,
  ],
}

Then commit and push it up to Netlify and the issue should be resolved. I pushed up two versions of your site (one with the fix, one without), and I can confirm adding this plugin resolves this issue.

As an aside, I went over to the repo for starter you used, and I see there is an issue about this (WebCu/gatsby-material-kit-react#12), so I am going to add some context to this and see if we can add this plugin into the starter directly so nobody has this problem anymore.

Love you man! That fixed my issue too.