Gatsby: [gatsby-plugin-netlify] Missing CSS

[vojtechruz]

LAtely, when I am using gatsby-plugin-netlify v 1.0.19 and deploying to Netlify as usual, my CSS is missing. I don't see any errors during build or in console.

Example is available here:
https://5ac331fddf99537dcbeaccca--vojtechruzicka.netlify.com/

With source code here:
https://github.com/vojtechruz/vojtechruzicka-blog/tree/netlify-plugin-error

When I remove the plugin, everything works fine, example is here:
https://www.vojtechruzicka.com/

I am using gatsby-plugin-sass 1.0.25

---

Build log:
9:49:18 AM: Build ready to start
9:49:20 AM: Fetching cached dependencies
9:49:20 AM: Starting to download cache of 188.9MB
9:49:21 AM: Finished downloading cache in 1.294407531s
9:49:21 AM: Starting to extract cache
9:49:25 AM: Finished extracting cache in 4.099888846s
9:49:26 AM: Finished fetching cache in 6.662053232s
9:49:26 AM: Starting to prepare the repo for build
9:49:27 AM: Preparing Git Reference refs/heads/netlify-plugin-error
9:49:35 AM: Starting build script
9:49:35 AM: Installing dependencies
9:49:36 AM: Started restoring cached node version
9:49:38 AM: Finished restoring cached node version
9:49:38 AM: v8.11.1 is already installed.
9:49:39 AM: Now using node v8.11.1 (npm v5.6.0)
9:49:39 AM: Attempting ruby version 2.3.6, read from environment
9:49:40 AM: Using ruby version 2.3.6
9:49:40 AM: Using PHP version 5.6
9:49:40 AM: Started restoring cached node modules
9:49:40 AM: Finished restoring cached node modules
9:49:41 AM: Started restoring cached go cache
9:49:41 AM: Finished restoring cached go cache
9:49:41 AM: unset GOOS;
9:49:41 AM: unset GOARCH;
9:49:41 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.10.linux.amd64';
9:49:41 AM: export PATH="/opt/buildhome/.gimme/versions/go1.10.linux.amd64/bin:${PATH}";
9:49:41 AM: go version >&2;
9:49:41 AM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.10.linux.amd64.env';
9:49:41 AM: go version go1.10 linux/amd64
9:49:41 AM: Installing missing commands
9:49:41 AM: Verify run directory
9:49:41 AM: Executing user command: gatsby build
9:49:42 AM: success delete html and css files from previous builds — 0.010 s
9:49:42 AM: success open and validate gatsby-config.js — 0.005 s
9:49:42 AM: success copy gatsby files — 0.017 s
9:49:43 AM: success onPreBootstrap — 0.719 s
9:49:44 AM: success source and transform nodes — 0.906 s
9:49:44 AM: success building schema — 0.420 s
9:49:44 AM: success createLayouts — 0.008 s
9:49:45 AM: success createPages — 0.162 s
9:49:45 AM: success createPagesStatefully — 0.014 s
9:49:45 AM: success onPreExtractQueries — 0.003 s
9:49:45 AM: success update schema — 0.283 s
9:49:45 AM: success extract queries from components — 0.186 s
9:50:07 AM: success run graphql queries — 22.203 s
9:50:07 AM: success write out page data — 0.006 s
9:50:07 AM: success write out redirect data — 0.001 s
9:52:00 AM: info bootstrap finished - 139.116 s
9:52:00 AM: success onPostBootstrap — 0.001 s
9:52:05 AM: success Building CSS — 4.898 s
9:52:23 AM: success Building production JavaScript bundles — 17.973 s
9:52:28 AM: success Building static HTML for pages — 5.676 s
9:52:29 AM: Total precache size is about 453 kB for 5 resources.
9:52:29 AM: info Done building in 167.874 sec
9:52:29 AM: Caching artifacts
9:52:29 AM: Started saving node modules
9:52:29 AM: Finished saving node modules
9:52:29 AM: Started saving pip cache
9:52:29 AM: Finished saving pip cache
9:52:29 AM: Started saving emacs cask dependencies
9:52:29 AM: Finished saving emacs cask dependencies
9:52:29 AM: Started saving maven dependencies
9:52:29 AM: Finished saving maven dependencies
9:52:29 AM: Started saving boot dependencies
9:52:29 AM: Finished saving boot dependencies
9:52:29 AM: Started saving go dependencies
9:52:29 AM: Finished saving go dependencies
9:52:29 AM: Build script success
9:52:29 AM: Starting to deploy site from 'public/'
9:52:38 AM: Starting post processing
9:52:40 AM: Post processing done
9:52:40 AM: Site is live
9:53:00 AM: Finished processing build request in 3m41.301093087s

[m-allanson]

Hey @vojtechruz, a couple of questions - Did this start happening after changing any dependencies? Does the same thing happen when you run gatsby build locally?

[vojtechruz]

It may be some change on side of Netlify as it did not help when I reverted my dependencies. It does not happen locally in gatsby develop mode.

[vojtechruz]

Also, sometimes I received error 'Unable to find element with ID' which should happen when html is minified and comments stripped but I checked and in netlify options this was disabled.

The error is described here:
https://www.gatsbyjs.org/docs/deploy-gatsby/#dont-minify-html

[calebsylvest]

Problem

I'm having the same issue at the moment. Deploying to Netlify for the first time today. gatsby build works locally and with Surge. I'm _not_ using the gatsby-plugin-netlify but am using gatsby-plugin-sass. Also, on the styles side, I'm using Tachyons the classic Sass/CSS way, not using styled components or anything new-fangled.

Considerations

My build log looks basically identical to @vojtechruz. Despite the log stating 9:52:05 AM: success Building CSS — 4.898 s the issue seems to be styles are never compiled.

Screenshot Examples

1. Localhost
2. Netlify (missing styles)
3. Surge

[calebsylvest]

Update But No Solution

Spent way too much time on this today...

So, I've tracked it down to this: the styles.css file is not being generated on build

This is the case (for me, now) on my local and when publishing on Netlify.

1. On my local I run gatsby build. The script runs and creates assets in the public/ directory, but that does not include a styles.css file. I can only assume the same happens when deploying to Netlify, since Netlify is running the same gatsby build script.
   
   
   
   • I've confirmed the lack of styles.css manually and by deploying to Surge.
   
   
2. I've read every blog post, Github Issue, Comment, and PR around using Gatsby Environment Variables––tried multiple solutions and still cannot get the build on Netlify to work.
   
   
   
   • I'm thinking we need more documentation + tutorials on how this works. If I figure it out I will write it up
   
   

[m-allanson]

@vojtechruz thanks for the link to your repo. I cloned it and can confirm that running gatsby build omits styles from the built site. I was able to successfully build the site by clearing out bothnode_modules _and_ the package-lock.json file:

• delete package-lock.json
• delete node_modules
• run npm install
• run npm run build

Does that work for you?

@calebsylvest Can you confirm when the styles are not being built for you? In your screenshots it looks like it's just on netlify, but in your second comment it sounds like gatsby build is not generating styles when run locally.

[calebsylvest]

Oh man, I don't know why or how, but that fixed all my problems... which I'm thankful for.

See the working site here: https://spacetime-gatsby.netlify.com/services

@m-allanson Re: your question about my second comment. I didn't state that after wrestling with the build process and trying a number of fixes I ended up in a worse spot than I began–with all builds failing to compile styles.

@m-allanson can you advise on setting Environment Variables on Netlify? I added NODE_ENV=production. Is that necessary?

---

My problem is solved. I'm going to read the documentation again on deploying to Netlify. We could probably use documentation on gotchas and troubleshooting Gatsby problems somewhere.

[vojtechruz]

@m-allanson I tried to remove package-lock.json and deploy to Netlify, but with no effect:

https://5acc849f73f2cf66baeff09c--vojtechruzicka.netlify.com/

https://github.com/vojtechruz/vojtechruzicka-blog/tree/netlify-plugin-error

As for other steps you cannot really delete node modules on Netlify, so I cannot do that, right?

[pieh]

You can delete node_modules - in your deploys tab, click trigger deploy and check "clear build cache"

[vojtechruz]

After clearing build cache and removing package-lock.json it works also on netlify.

[stepheljobs]

Sadly this steps doesnt work on me.

delete package-lock.json
delete node_modules
run npm install
run npm run build

I hope the gatsby team, look at this issue.

[mdrx-io]

Had this same issue. The above steps worked for me, but I'm using yarn and had to make sure to remove both lock files - removing only the package-lock wasn't enough.