Gatsby: CSS Failing to Compile Sporadically on Netlify Builds

[jaredsilver]

Description

_I'm not convinced this is an issue with Gatsby, but the Twitter account encouraged me to open an issue for it just in case._

A couple times recently, I've gone to deploy my personal website built with Gatsby on Netlify, and it appears the CSS either fails to compile or fails to load once deployed.

The build logs show no sign of any warnings or errors, but the result is my personal website appearing without any styling.

Steps to reproduce

This happens sporadically, and I've not been able to reproduce it by my own volition. It has not happened locally.

It appears to get fixed when I manually redeploy and clear the build cache on Netlify.

Expected result

The site should appear as it does during local development.

Actual result

The site appears without styling.

Environment

• Gatsby version (npm list gatsby): 1.9.145
• gatsby-cli version (gatsby --version): Unsure (whatever Netlify uses)
• Node.js version: v6.13.1
• Operating System: Unsure (whatever Netlify uses)

File contents (if changed):

gatsby-config.js: https://github.com/jaredsilver/jaredasilver.com/blob/master/gatsby-config.js
package.json: https://github.com/jaredsilver/jaredasilver.com/blob/master/package.json
gatsby-node.js: not changed
gatsby-browser.js: not changed
gatsby-ssr.js: not changed

[m-allanson]

Can you try updating Gatsby and plugins to the latest version?

On 7 March 2018 at 17:11, Jared Silver [e-mail] wrote:

Description

I'm not convinced this is an issue with Gatsby, but the Twitter account
encouraged me to open an issue for it just in case.

A couple times recently, I've gone to deploy my personal website built
with Gatsby on Netlify, and it appears the CSS either fails to compile or
fails to load once deployed.

The build logs show no sign of any warnings or errors, but the result is
my personal website appearing without any styling.
Steps to reproduce

This happens sporadically, and I've not been able to reproduce it by my
own volition. It has not happened locally.

It appears to get fixed when I manually redeploy and clear the build cache
on Netlify.
Expected result

The site should appear as it does during local development.
Actual result

The site appears without styling.
Environment

• Gatsby version (npm list gatsby): 1.9.145
• gatsby-cli version (gatsby --version): Unsure (whatever Netlify uses)
• Node.js version: v6.13.1
• Operating System: Unsure (whatever Netlify uses)

File contents (if changed):

gatsby-config.js: https://github.com/jaredsilver/jaredasilver.com/
blob/master/gatsby-config.js
package.json: https://github.com/jaredsilver/jaredasilver.com/
blob/master/package.json
gatsby-node.js: not changed
gatsby-browser.js: not changed
gatsby-ssr.js: not changed

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/4418, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAXTaZRdiFSlGc7pls1tp7I5Sk7KEidEks5tcBSugaJpZM4Sg0vU
.

[jaredsilver]

I just ran yarn upgrade and deployed, and the issue still occurred unfortunately.

Is it possible I've just made a mess of npm and yarn?

npm list gatsby returns 1.9.145 whereas yarn list gatsby returns 1.9.225. The logs show that yarn.lock is being used for versioning.

[jaredsilver]

Just adding some additional information:

Here's a version of the site on Netlify that deployed with no CSS: https://5aa035a2295b5513ea171241--jaredasilver.netlify.com/

And here's the live version with CSS: https://jaredasilver.com

For some reason, the first one has nothing inside <style id='gatsby-inlined-css'></style>, but clearing the build cache and triggering a manual redeploy made it work as expected.

[m-allanson]

Could this be related to #4516?

[zacaytion]

I'm having the same issue.
However I don't think it's a netlify issue as my styling doesn't appear when I build locally either.
The only style that seems to work locally is my font, which is being handled bytypography.js. What is odd is that the correct font loads for a few milliseconds before it reverts to the system font.

I'm using emotion and react-emotion for my CSS-in-JS solution, so the issue could be stemming from that.

[andrewkslv]

Same issue for me. I created a project from gatsby-advanced-starter and added "gatsby-plugin-sass": "^1.0.26". With develop, scss works fine but not with build command.

Still didn't find a cause of the issue.

Mac OS.

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[jaredsilver]

I haven't experienced this problem in months, so I'm going to close the issue. If it comes up again, or if someone else experiences something similar, we can reopen it.