gatsby build results in different CSS to that of gatsby develop

[jonathan-chin]

I just noticed this happen with my latest push. Up til then, it worked fine.

I have a Netlify account connected to GitLab and it builds and deploys from there.

I followed the suggested actions in #5734 but it didn't work for me. I don't think I use the offline plugin mentioned there either.

Notably, I recently had an issue with BrowserslistError: Unknown browser query dead. Downgrading my global gatsby package from 2.X to 1.9.X fixed that but might have caused this CSS issue as a result?

... How can I solve either of these problems?

The repo is public here: https://gitlab.com/sharemeals/gatsby-site

update it seems I have the gatsby-plugin-offline package in my package.json. However, removing it from there and from node_modules doesn't seem to make a difference. I might have installed it without actually implementing it.

[kakadiadarpan]

@jonathan-chin can you please provide relevant environment information by running gatsby info --clipboard?

Also, I noticed that you are using Gatsby v1 from your package.json in the repo you shared. Please use gatsby-cli version 1.x.x for Gatsby v1. gatsby-cli version 2.x.x is for Gatsby v2

[jonathan-chin]

@kakadiadarpan

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 9.4.0 - /usr/local/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Safari: 12.0
  npmPackages:
    gatsby: ^1.9.277 => 1.9.278
    gatsby-image: ^1.0.24 => 1.0.55
    gatsby-link: ^1.6.28 => 1.6.46
    gatsby-plugin-canonical-urls: ^1.0.11 => 1.0.18
    gatsby-plugin-google-analytics: ^1.0.12 => 1.0.31
    gatsby-plugin-google-fonts: 0.0.3 => 0.0.3
    gatsby-plugin-material-ui: ^0.1.3 => 0.1.3
    gatsby-plugin-nprogress: ^1.0.10 => 1.0.14
    gatsby-plugin-react-helmet: ^1.0.5 => 1.0.8
    gatsby-plugin-react-next: ^1.0.11 => 1.0.11
    gatsby-plugin-sass: ^1.0.26 => 1.0.26
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48
    gatsby-remark-autolink-headers: ^1.4.8 => 1.4.19
    gatsby-remark-copy-linked-files: ^1.5.36 => 1.5.37
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^1.5.67 => 1.5.67
    gatsby-remark-responsive-iframe: ^1.4.19 => 1.4.20
    gatsby-source-filesystem: ^1.5.8 => 1.5.39
    gatsby-transformer-remark: ^1.7.21 => 1.7.44
    gatsby-transformer-sharp: ^1.6.14 => 1.6.27
  npmGlobalPackages:
    gatsby-cli: 2.0.0-rc.1
    gatsby: 1.9.278

when I downgrade my global gatsby-cli to 1.9.X, I get the CSS issue. when I keep it at 2.0.0-rc.1, it gives me the BrowserslistError: Unknown browser query dead error

[kakadiadarpan]

@jonathan-chin I understand that you are getting the CSS issue with gatsby-cli version 1.9.x, but that is the version you should be using as it is compatible with Gatsby version you are using.

Thanks for sharing the reproduction repo. I'll take a look at that.

[kakadiadarpan]

@jonathan-chin would it possible for you to tell which CSS is exactly differing in develop vs build?

[jonathan-chin]

@kakadiadarpan
This is from develop and is the styling expected

this is what I get from build:

You can see that their CSS classes are different.

I don't recall this being an issue before. The last good build (where CSS was not affected) was https://gitlab.com/sharemeals/gatsby-site/commit/4342a715d6a1cdcb2808e5450819753be6f56a19

[DSchau]

I think the fix for this is #8092.

@jonathan-chin would you be able to pull the contents of that fix down, and then try with those changes? Note: if you haven't seen it yet, the How to Contribute section of Gatsby's docs contains info on how to get set up with gatsby-dev-cli, which you'll need to test it out!

[DSchau]

Also @jonathan-chin looks like you're on Gatsby v1. Would you be able to upgrade to Gatsby v2 to get this fix?

[jonathan-chin]

@DSchau sorry it took me so long to get back to this.

migrating the existing project to v2 was too much work. I decided to start a new v2 starter and migrate it piece by piece (copying and modifying as needed). In this case, gatsby develop produces radically different output than gatsby build:

gatsby build

gatsby develop

comparing the css styles of two identical elements on build and develop:

build:

.jss94 {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-transform: uppercase;
}

develop:

.MuiTypography-headline-88 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  line-height: 1.35417em;
}

I have some Material UI overriding scss that I load into the layout component in v2. in develop, it seems to merge them well but in build, it seems to be ignoring them? can that be the cause?

I just have an import '../scss/style.scss';

[kakadiadarpan]

@jonathan-chin did you try this with v2 or as per steps mentioned in the comment by @DSchau above?

[jonathan-chin]

@kakadiadarpan Sorry, I don't have the capacity (ie time) to set up that work flow.

After looking at the PR fix, it seems to be the same issue I'm experiencing. I can close this issue for now and monitor the PR.

[jonathan-chin]

@kakadiadarpan sorry, I just realized something strange.

When my site first loads, the CSS is wacky. but forcing it to reload the index page, the CSS loads fine. Here are the steps to reproduce:

1. load https://sharemeals.org/
   examine the emerson quote toward the bottom:

2. click on the top left site name. it will reload the index page without refreshing the site. the emerson quote appears as expected:

(the emerson quote is indicative of other CSS changes. I'm only calling this one out because it is the most visible)

[kakadiadarpan]

@jonathan-chin Thank you for the update. I'm able to reproduce the issue with the steps that you provided. Are you using Gatsby v1 or v2 for https://sharemeals.org/?

[ivorpad]

I'm having this exact same issue:

When using injectGlobal I'm getting diffent styles after running gatsby build. You can see the issue here: https://ivorpad.com/about

After the page finishes loading hover the links 'Writing' or 'Work' and you'll see the styles change.

Solved it by moving the heading styles to page.js instead of global.

 System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.4 - ~/n/bin/node
    Yarn: 1.2.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/n/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 62.0.2
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.7 => 2.0.8
    gatsby-plugin-google-analytics: ^2.0.0-rc.2 => 2.0.0-rc.2
    gatsby-plugin-google-fonts: ^0.0.4 => 0.0.4
    gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0
    gatsby-plugin-styled-components: ^3.0.0 => 3.0.0
    gatsby-plugin-typography: ^2.2.0 => 2.2.0
    gatsby-remark-prismjs: ^3.0.1 => 3.0.1
    gatsby-source-contentful: ^2.0.1-beta.15 => 2.0.1
    gatsby-transformer-remark: ^1.7.44 => 1.7.44

[jonathan-chin]

@kakadiadarpan that's using "gatsby": "^1.9.277"

[kakadiadarpan]

I think the fix for this is #8092.

@jonathan-chin would you be able to pull the contents of that fix down, and then try with those changes? Note: if you haven't seen it yet, the How to Contribute section of Gatsby's docs contains info on how to get set up with gatsby-dev-cli, which you'll need to test it out!

@jonathan-chin can you try suggestions provided by @DSchau in this comment?

[jonathan-chin]

@kakadiadarpan I think I tried to implement this just now. I installed gatsby-cli-dev, forked and pulled, switched the branch, etc etc.

The issue still persists.

How can I double check that the new node_modules/gatsby that I have is correct and not the old one?

[jonathan-chin]

I've done some more investigating, with Gatsby 1.X.X and without the fix proposed.

(I tried upgrading to Gatsby 2.X.X and separately the fix proposed and neither worked)

the jss class for the desired style does exist on the initial pageload. in this case, .jss58. However, the element I'm looking at doesn't get .jss58 on the initial load. only after making another page request (even requesting the same page) will the element correctly get .jss58

So what's in charge of determining what jss classes to apply? is there a reason why it would have one result on initial load but a different load on all subsequent page requests?

EDIT: there are some other major issues. on production build, my svg icons never fully load, regardless of page request:

This is what I get instead on develop:

[PawanHegde]

I am facing the same issue. The gatsby develop and gatsby build versions are very different for me.

If I land directly or refresh a page with material-ui components, the CSS is broken for those components. The classes are present in the source but they aren't applied to the elements. If I follow a <Link> to the same page, however, everything works fine.

I have also noticed that if I run gatsby build while gatsby develop is running, the gatsby develop version also starts behaving in exactly the same way as the gatsby build version.

System:
    OS: Linux 3.10 Red Hat Enterprise Linux Workstation 7.3 (Maipo)
    CPU: x64 Intel(R) Xeon(R) CPU E5-2620 v4 @ 2.10GHz
    Shell: 4.2.46 - /bin/bash
  Binaries:
    Node: 11.1.0 - /usr/bin/node
    Yarn: 1.12.1 - /usr/bin/yarn
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
  npmPackages:
    gatsby: 2.0.37 => 2.0.37
    gatsby-cli: 2.4.4 => 2.4.4
    gatsby-plugin-typography: 2.2.1 => 2.2.1
    gatsby-source-atom: 0.1.0 => 0.1.0
    gatsby-source-ghost: 2.1.2 => 2.1.2
  npmGlobalPackages:
    gatsby-cli: 2.4.4

(I have never used gatsby-plugin-offline)

You can check out the website at http://pawanhegde.netlify.com
The source is at https://gitlab.com/PawanH/pawanh.gitlab.io/tree/gatsbyjs

To see the "expected" version, click on any of the comically large icons near the bottom.

I haven't had the time yet to try the fix for #8092

[PawanHegde]

I haven't had the time yet to try the fix for #8092

It did not fix the issue for me. I still see the same behaviour.

Expected

Actual

[topherauyeung]

If I land directly or refresh a page... the CSS is broken for those components. The classes are present in the source but they aren't applied to the elements. If I follow a <Link> to the same page, however, everything works fine.

This is also happening exactly as described for me. I tried the fix in #8092 and it worked for most pages, but did not work for all of them.

Expected:

Actual:

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.10.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.102
    Firefox: 62.0.3
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.46 => 2.0.46 
    gatsby-image: ^2.0.20 => 2.0.20 
    gatsby-link: ^2.0.6 => 2.0.6 
    gatsby-plugin-catch-links: ^2.0.8 => 2.0.8 
    gatsby-plugin-flow: 1.0.2 => 1.0.2 
    gatsby-plugin-google-analytics: ^2.0.7 => 2.0.7 
    gatsby-plugin-manifest: ^2.0.9 => 2.0.9 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1 
    gatsby-plugin-root-import: 2.0.4 => 2.0.4 
    gatsby-plugin-sass: ^2.0.4 => 2.0.4 
    gatsby-plugin-sharp: 2.0.12 => 2.0.12 
    gatsby-plugin-sitemap: ^2.0.2 => 2.0.2 
    gatsby-plugin-svgr: 2.0.0-alpha => 2.0.0-alpha 
    gatsby-remark-copy-linked-files: 2.0.6 => 2.0.6 
    gatsby-remark-images: 2.0.6 => 2.0.6 
    gatsby-remark-responsive-iframe: ^2.0.6 => 2.0.6 
    gatsby-remark-smartypants: 2.0.6 => 2.0.6 
    gatsby-source-filesystem: 2.0.8 => 2.0.8 
    gatsby-source-wordpress: 3.0.13 => 3.0.13 
    gatsby-transformer-remark: 2.1.12 => 2.1.12 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.8 

[neutralboy]

I solved this issue by doing the following
in the index.js file I had

import 'injectSheet' from react-jss
import './../bootstrap.min.css'

by reversing the order I was able to specify the order in which I wanted to import css in the html.
So, my final code was

import './../bootstrap.min.css'
import 'injectSheet' from react-jss

Solution:Change order of imports
This solved the problem for me. Hopefully it does the same to you.

[jamesjryan]

I'm having the same issues, among many others:

• develop runs nondeterministically, however, when it does run, it works fine.
• StaticQuery fails to finish loading images nondeterministically.
• build fails nondeterministically, usually seg faulting in image stuff.
• build output differs greatly from that of develop - this is the deal breaker.
• develop and build seem to interact with each other.

These issues are such a drag that they unfortunately seem to outweigh any of the benefit of Gatsby for me, and forcing me to switch back to Create React App.

[LekoArts]

We're closing this issue in favor of #17914 to keep things organized.

[sidharthachatterjee]

@eyalroth I agree that this is indeed an issue we need to resolve. Let's discuss this in #17914 and get to the bottom of this

[stefantrinh1]

I also got this issue. the Gatsby develop environment was fine but in build when reloading the problem page. className's and even inline style was being stripped out of the certain tags. Which left me with an div with no attributes but all the children were rendered.

however when i changed route using the gatsby link router rather than full page refresh. it fixes the issue.

This drove me Mad for hours. I found a horrendous fix, probably not a good practice but it did work For now.

But I changed the (div) tag to (article)

Suddenly the

<div>

became

<article class="CartSummary-module--summary--3zJVn">

on build

It also worked with ul and pre.

[funkfinger]

Thanks for the crazy workaround @stefantrinh1 - I too am experiencing this crazy css behavior

If anyone wants to see it replicated, I have a public repo and have deployed both versions:

seems to work with @stefantrinh1 's article workaround
https://github.com/funkfinger/blog/tree/good
https://good.jaywiggins.com

does not work
https://github.com/funkfinger/blog/tree/bad
https://bad.jaywiggins.com

[DekiGk]

I had similar issue while conditionally trying to load a component based on the cookie value. Of course, this did not work as you have SSR on production (not sure why it works in dev mode though). Anyway, what I ended up doing is wrapping my check inside useEffect and checking which component to render once React takes over (rehydrates) on the client. You can use componentDidMount() for class components. After I implemented this, everything works as expected.

[funkfinger]

My problem was that I was using wrapPageElement and wrapRootElement in gatsby-browser.js but not in gatsby-ssr.js. Once I copied what I had over to gatsby-ssr.js things started working as expected. Please see @jlkiri 's response: #22113 (comment)

[emailnikola]

Same issue in 2020. Clicking on fixes the issue but on full reload issue is present.
"gatsby": "^2.19.45",
"react-custom-scrollbars": "^4.2.1",

[Borivoje-06]

i have same problem as emailnikola

[blainekasten]

#25729

[hayyaun]

In my case, gatsby-plugin-minify was making this problem, which led the production build to reload all styles in the production build.

[DenisCor]

2021 same problem. not touching Gatsby ever again

[thatgriffith]

@eyalroth thanks! Your solution worked for my Gatsby site 💯

[EmanueleCiriachi]

I am facing the same issue. The gatsby develop and gatsby build versions are very different for me.

In one specific page of my site, all of the CSS classes are replaced with jss<number>, breaking my custom CSS significantly. I do not have the same problem during development.

It is late and I have yet to try any of the proposed solutions, I will update my comment once I have tested them.

[KyleAMathews]

Try enabling DEV_SSR as it eliminates many of the differences between development and production #28138

[EmanueleCiriachi]

Try enabling DEV_SSR as it eliminates many of the differences between development and production #28138

If I do that, I get

The site's gatsby-config.js failed validation: "flags" is not allowed

during compilation.

[KyleAMathews]

Ok you probably need to update your gatsby version then.

[amrvignesh]

This was the issue for me: https://stackoverflow.com/questions/62945943/styles-disappear-on-page-reload-using-gatsbyjs-and-material-ui?rq=1

[Pebsie]

2022 and the issue persists. Clearly Gatsby is not suitable for use. It'd be good to get an official resource on alternatives, and perhaps updating the main Gatsby site dissuading people from bothering to learn it.

[summer-cook]

I have the same issue. When running gatsby develop, everything looks great. but after gatsby build, some of the assets are showing up differently.

[bstchow]

If anyone is still running into this issue in 2024, I recently encountered it and I was able to resolve it by removing the gatsby-plugin-purgecss plugin from my project. It seems to come included with a lot of Gatsby starter projects.