Site breaks on build/serve but works perfectly in develop

Description

Here’s the repo (note: very much a WIP): https://github.com/TidyIQ/gatsby-themes

This works perfectly when I run it in development mode but once I build and serve it, everything breaks.

Here’s how it looks in develop: https://i.imgur.com/rqtMwoL.png

And in build/serve: https://i.imgur.com/Kmi1YCW.png

Steps to reproduce

Clone repo and install then run:

yarn workspace @tidyiq/gatsby-theme-tidyiq build
yarn workspace simple-site dev

Then run

yarn workspace simple-site build
yarn workspace simple-site serve

Expected result

No issue

Actual result

See screenshots above

Environment

System: OS: Windows 10 CPU: (4) x64 Intel® Core™ i5-7200U CPU @ 2.50GHz Binaries: Node: 10.15.3 - ~\AppData\Local\Temp\yarn–1564036881678-0.9003840083964854\node.CMD Yarn: 1.16.0 - ~\AppData\Local\Temp\yarn–1564036881678-0.9003840083964854\yarn.CMD npm: 6.10.0 - C:\Program Files\nodejs\npm.CMD Languages: Python: 2.7.16 - C:\Python27\python.EXE Browsers: Edge: 42.17134.1.0

[TidyIQ]

Also, it works fine on the initial load for a millisecond or two, then it refreshes and breaks.

[TidyIQ]

Annnd a bit more insight…

I realised that the CSS was only failing for the components I’ve imported from my custom gatsby theme. Basically, that form with the two imports and button are imported from the gatsby theme, while the Open Snackbar button is imported directly from Material UI (in node_modules) in the site itself.

The Open Snackbar button works fine. So the issue is with how Gatsby compiles the theme.

I added the following to my theme’s gatsby-browser.js and gatsby-ssr.js files, and now it’s working:

import NoSsr from "@material-ui/core/NoSsr"; // Imported this
import ContextProvider from "./src/_config/context";

export const wrapRootElement = ({ element }) => (
  <NoSsr> // Added this wrapper
    <ContextProvider>{element}</ContextProvider>
  </NoSsr>
);

I’m not sure if this is optimal or if it’s going to cause performance and other issues, but it works now in production.

I won’t close this as I don’t believe the issue is resolved. The expected behaviour is that the production build should work exactly the same as the development build, and that is not the case.