Material-ui: What might cause gatsby build to create such different HTML compared to gatsby develop?

[kpennell]

Using 4.6

• [X] The issue is present in the latest release.
• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I'm just struggling for 8+ hours with a gatsby build vs. gatsby develop issue. The app looks/works one way with gatsby develop (the right way) and then the styling goes to hell when using gatsby build

gatsby build creates a footer that takes up half of the page

I've tried:

• using makeStyles instead of withStyles (including converting some class components to functions using hooks)
• tweaking different options of the gatsby-plugin-material-ui plugin
• messing with the styles/classes
• removing and reinstalling node modules, cache, gatsby clean, etc.

Expected Behavior 🤔

gatsby develop creates a functioning footer player like so

It's odd really, the HTML in my code editor looks like this:

But the html in my browser after gatsby build has Grids + containers in it:

Steps to Reproduce 🕹

So the oddest thing is that it seems to work fine in codesandbox

https://codesandbox.io/s/github/kpennell/berlinmusicmap/tree/master/?fontsize=14

https://v0i41.sse.codesandbox.io/

Context 🔦

I think there's still many many oddities in how Gatsby and Material-UI play together. These allude to it:
https://github.com/gatsbyjs/gatsby/issues/8560
https://github.com/gatsbyjs/gatsby/issues/9911

Your Environment 🌎

System:
OS: macOS 10.14
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.12.0 - /usr/local/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 78.0.3904.97
Firefox: 70.0.1
Safari: 12.0
npmPackages:
gatsby: ^2.17.10 => 2.17.10
gatsby-cli: ^2.8.8 => 2.8.8
gatsby-image: ^2.2.29 => 2.2.30
gatsby-plugin-layout: ^1.1.13 => 1.1.13
gatsby-plugin-manifest: ^2.2.25 => 2.2.26
gatsby-plugin-material-ui: ^2.1.6 => 2.1.6
gatsby-plugin-netlify: ^2.1.23 => 2.1.23
gatsby-plugin-offline: ^3.0.18 => 3.0.18
gatsby-plugin-react-helmet: ^3.0.10 => 3.1.13
gatsby-plugin-remote-images: ^1.0.7 => 1.0.7
gatsby-plugin-sharp: ^2.2.36 => 2.2.36
gatsby-remark-copy-linked-files: ^2.0.11 => 2.1.28
gatsby-remark-images: ^3.0.1 => 3.1.29
gatsby-remark-relative-images: ^0.2.1 => 0.2.3
gatsby-source-filesystem: ^2.1.35 => 2.1.35
gatsby-transformer-remark: ^2.3.4 => 2.6.32
gatsby-transformer-sharp: ^2.1.9 => 2.3.2
npmGlobalPackages:
gatsby-cli: 2.8.8

[support[bot]]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[mbrookes]

@kpennell If you can narrow this down to a specific reproducible issue that is caused by Material-UI, feel free to reopen.

[oliviertassinari]

I had a quick look, it's definitely a support question regarding how Gatsby works. tip: gatsby-browser.js !== gatsby-ssr.js.

[kpennell]

@oliviertassinari Thanks for the response and all the work you do.

[kpennell]

I (seemingly) solved this by literally copying what I had gatsby-browser.js to gatsby-ssr.js (wrapRootElement + wrapPageElement). I'm still not totally sure why this worked -- I'll need to read more about these in Gatsby's docs.

Dear frustrated/lost person from the future seeing wacky different CSS between gatsby develop and gatsby build ....if you're using React Context, try verbatim copying your wrapRootElement/wrapPageElement between the two files.

[kpennell]

Thanks @oliviertassinari