Styles disappear on page reload using GatsbyJS and Material-UI

user_11860012 0
Viewed 1510

On page reload, styles disappear. On the first load, everything appears normal. This issue does not happen on the local development environment. I'm using GatsbyJS and Material-UI. I have tried placing the plugins in a different order, I have tried changing the styles in my components. I don't understand why it would work in the local development environment but on the cloud it breaks.

In gatsby-config I have Material-UI set up as such:

{
      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
        },
      },
    },

gatsby-browser and gatsby-ssr both have this in them:

import React from 'react'
import ThemeProvider from '@material-ui/styles/ThemeProvider'
import theme from './src/components/ui/Theme'
import GlobalContextProvider from './src/context/GlobalContext'
import CartContextProvider from './src/context/CartContext'
import './src/components/layout.css'

export const wrapRootElement = ({ element }) => {
  return (
    <ThemeProvider theme={theme}>
      <CartContextProvider>
        <GlobalContextProvider>{element}</GlobalContextProvider>
      </CartContextProvider>
    </ThemeProvider>
  )
}

require('typeface-roboto')

Here is the website. Even if I link it here, the hero section on the homepage doesn't load, but if you click away (anywhere on the nav) and come back it's there. If you reload, it disappears again but if you click away and come back, it reappears. This is happening on all pages. Why are the styles vanishing?

gatsby material-ui reactjs
1 Answers

I found the answer. This is currently a known issue from within Gatsby. Hopefully this issue can be resolved quickly because this seems to be a huge problem with Gatsby.

https://github.com/gatsbyjs/gatsby/issues/25729

The workaround for this is to use this code in gatsby-browser.js at the cost of performance:

import ReactDOM from 'react-dom'

export function replaceHydrateFunction() {
  return (element, container, callback) => {
    ReactDOM.render(element, container, callback)
  }
}
user_118600120
Related