Gatsby: What might cause gatsby build to create such different HTML compared to gatsby develop?

[kpennell]

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

[sever1an]

This is probably a react hydration error which happens when the server rendered HTML does exactly match what the deployed app would have created on initial render. Basically render() should be a pure function on props and state, at least for the first render.

material-ui has something it calls a class name generator which is a side-effect factory. Even with the plugin installed it is still possible to use examples and blow up SSR. They offer some debugging hints: https://material-ui.com/getting-started/faq/#react-class-name-hydration-mismatch

[kpennell]

@sever1an Thanks a lot for the response. This has been a super challenging one to try to figure out.

This is a good clue.

[sever1an]

I tried to help someone with it in discord who spent several entire days trying to figure it out, although I am not sure they fully understood the underlying concepts with hydration.

The docs should probably warn people about libraries with known SSR issues.

[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.

There is no better gif for when the code doesn't work and then does: https://i.imgur.com/j4xzeKe.gifv

So nice to have community help/support

[ashwamegh]

Thanks @kpennell , Faced the same issue, Working for me 👍

[kpennell]

nice, yeah, what a doozy of an error. I made a big Stackoverflow post on it
too (should someone else hit this).

On Wed, Aug 5, 2020 at 7:33 AM Shashank Shekhar [e-mail]
wrote:

Thanks @kpennell https://github.com/kpennell , Faced the same issue,
Working for me 👍

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/19386#issuecomment-669228827,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAIC4IINV7W5QUEEWBHNP7LR7FUSLANCNFSM4JLATSSA
.