How to fix broken CSS on Netlify when using Gatsby? - css

Question

I'm not sure where to begin troubleshooting a gatsby/netlify issue. When I run gatsby develop locally, my site looks one way, when I deploy to Netlify, it works another.
Where does one even begin fixing/troubleshooting this sort of thing?
My gatsby-config.js
const dotenv = require("dotenv")
dotenv.config({
path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
siteMetadata: {
title: `Berlin Music Map`,
description: "Find live music in Berlin",
author: `Kyle Pennell`,
},
plugins: [
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
`gatsby-plugin-react-helmet`,
// {
// resolve: "gatsby-plugin-remote-images",
// options: {
// nodeType: "item",
// imagePath: "thumbnail",
// name: 'optimized_thumbnail',
// }
// },
{
resolve: "gatsby-plugin-remote-images",
options: {
nodeType: "item",
imagePath: "soundcloud_artwork",
name: 'optimized_soundcloud_artwork',
}
},
{
// keep as first gatsby-source-filesystem plugin for gatsby image support
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/img`,
name: 'uploads',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
},
},
{
resolve: `gatsby-plugin-material-ui`,
options: {
theme: {
palette: {
primary: {
lighter: '#47B3C0',
light: '#397AB2',
main: '#005691',
dark: '#202E5F',
},
secondary: {
lighter: '#FFECC4',
light: '#FED969',
main: '#E7A700',
dark: '#C45527',
},
},
typography: {
html:{
fontSize:"14px"
},
h1: {
fontSize: "3.052em"
},
h2: {fontSize: "2.441em"},
h3: {fontSize: "1.953em"},
h4: {fontSize: "1.563em"},
h5: {fontSize: "1.25em"},
h6: {fontSize: "1.05em"},
fontFamily: '"Raleway", "Open Sans", "Arial", sans-serif',
useNextVariants: true,
},
},
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// 'gatsby-plugin-offline',
],
}
package.json
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"#material-ui/core": "^4.5.1",
"#material-ui/icons": "^4.5.1",
"#tippy.js/react": "^3.0.1",
"axios": "^0.19.0",
"dotenv": "^8.0.0",
"gatsby": "^2.17.7",
"gatsby-cli": "^2.8.8",
"gatsby-image": "^2.2.29",
"gatsby-plugin-layout": "^1.1.13",
"gatsby-plugin-manifest": "^2.2.25",
"gatsby-plugin-material-ui": "^2.1.6",
"gatsby-plugin-offline": "^2.0.25",
"gatsby-plugin-react-helmet": "^3.0.10",
"gatsby-plugin-remote-images": "^1.0.7",
"gatsby-plugin-sharp": "^2.2.32",
"gatsby-remark-copy-linked-files": "^2.0.11",
"gatsby-remark-images": "^3.0.1",
"gatsby-remark-relative-images": "^0.2.1",
"gatsby-source-filesystem": "^2.1.35",
"gatsby-transformer-remark": "^2.3.4",
"gatsby-transformer-sharp": "^2.1.9",
"google-map-react": "^1.1.5",
"lodash": "^4.17.15",
"memoize-one": "^4.0.2",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-fa": "^5.0.0",
"react-helmet": "^5.2.0",
"react-player": "^1.11.1",
"react-soundcloud-player": "^1.1.1",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.2.2",
"tippy.js": "^5.0.1"
},
"devDependencies": {
"prettier": "^1.16.4"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write src/**/*.{js,jsx}",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
https://codesandbox.io/s/github/kpennell/berlinmusicmap/tree/master/?fontsize=14

Answer 1

The CSS injection order when doing gatsby build is a place to start. Material UI styles can get messed up when they are not injected first.
How to do it in the gatsby plugin:
https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/#advanced
From the MUI docs: https://material-ui.com/styles/advanced/#css-injection-order

Answer 2

Can you try to run gatsby build && gatsby serve on your local machine? Then go to localhost:9000 to see if your layout is all messed up.
Generally, it's good to check the built version of your Gatsby site by running this command. Especially since the new build time pricing of Netlify 😱
The issue might be independent of Netlify and related to Material UI.
Check this issue: https://github.com/mui-org/material-ui/issues/18197 you might find some useful information in it.

Answer 3

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.