Gatsby build site is broken but gatsby develop locally works perfectly

[fterh]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I developed using gatsby develop locally and made sure everything worked perfectly. Then I git-pushed, merged to master, which automatically deployed the site through Netlify.

In production, the site is just broken. The content renders then disappears, but if you navigate to /blog and back to home page (using the navigation bar above) you'll see that the content is back, the font color effects are gone, and the layout is wrong.

I have no idea where to even start debugging this as I've never encountered anything remotely close to this.

Reproduction Link

https://github.com/fterh/fabianterh.me

Steps to Reproduce

1. Go to https://6169175b7031ac6c41a60db1--fabianterh.netlify.app/
2. Notice the paragraph of text rendering then disappearing
3. Note the color of the text "I'm Fabian"
4. Click on Blog and fterh again on the top navigation bar
5. See how everything changed
6. git clone the repo https://github.com/fterh/fabianterh.me, then run yarn develop
7. Everything works perfectly locally

Expected Result

Development and production should look and act identically

Actual Result

Development works perfectly but production is broken

Environment

System:
    OS: macOS 11.0.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.3.0 - /var/folders/4l/cp8vjytx6s14gnnqdmp3_fr80000gn/T/yarn--1634278028491-0.23298416247322473/node
    Yarn: 1.22.15 - /var/folders/4l/cp8vjytx6s14gnnqdmp3_fr80000gn/T/yarn--1634278028491-0.23298416247322473/yarn
    npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 94.0.4606.81
    Firefox: 92.0.1
    Safari: 14.0.1
  npmPackages:
    gatsby: ^3.0.0 => 3.14.1 
    gatsby-plugin-google-analytics: ^3.0.0 => 3.14.0 
    gatsby-plugin-image: ^1.14.1 => 1.14.1 
    gatsby-plugin-manifest: ^3.0.0 => 3.14.0 
    gatsby-plugin-offline: ^4.0.0 => 4.14.0 
    gatsby-plugin-react-helmet: ^4.0.0 => 4.14.0 
    gatsby-plugin-sharp: ^3.0.0 => 3.14.0 
    gatsby-plugin-styled-components: ^4.0.0 => 4.14.0 
    gatsby-plugin-typescript: ^3.0.0 => 3.14.0 
    gatsby-source-filesystem: ^3.0.0 => 3.14.0 
    gatsby-source-medium: ^3.14.0 => 3.14.0 
    gatsby-transformer-remark: ^4.11.0 => 4.11.0 
    gatsby-transformer-sharp: ^3.0.0 => 3.14.0

Config Flags

No response

[timwright12]

Seeing this same issue since the latest gatsby-plugin-sharp update

[fterh]

Seeing this same issue since the latest gatsby-plugin-sharp update

I don't think this has to do with that, I've identified it to a Typography component in another issue over at MUI (mui/material-ui#29072).

[LekoArts]

You most probably can debug this locally by running gatsby build and gatsby serve. Material UI will also be the culprit here I think -- in the past people used https://github.com/hupe1980/gatsby-plugin-material-ui to mitigate Flash of Unstyled Content/SSR issues, with the recent MUI change I don't know what specifics must be changed for it to work correctly in a SSR environment. As it's just emotion I'd expect it to work.