Rebass styles not applied on first load

[iammatthias]

Rebass media queries are not applied correctly after site is built and published on Netlify. Styles behave properly in local development.

Steps to Reproduce

1. Clear cache and reload page https://iammatthias.com (Shift + Command + R)
2. Page will present incorrectly
3. After page refresh, content loads as expected
4. If content does not load correctly after refresh, try again. It can take 3-4 attempts.

References:

• https://github.com/gatsbyjs/gatsby/issues/6413
• https://github.com/gatsbyjs/gatsby/issues/13966
• https://github.com/gatsbyjs/gatsby/issues/7376

Proposed Solutions

• Install gatsby-plugin-styled-components and add to GatsbyJS config
  • Already installed, no change
• Reevaluate Global styles (https://github.com/gatsbyjs/gatsby/issues/13966#issuecomment-491364273)
• ?

Expected

Result

[wiput1999]

Hmmmm I'm facing the same here

[iammatthias]

import Layout from './src/components/general/Layout'

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

Got removed from gatsby-browser and gatsby-ssr. Added the above snippet, and all is well.