PostCSS hash issue on Netlify platform

Support
, ,
1

Hi,

I run into the following error when building my Hugo site on Netlify.

4:38:05 PM: Building sites … Total in 189 ms
4:38:05 PM: Error: Error building site: POSTCSS: failed to transform "css/styles.css" (text/css): resource "css/css/styles.css_ae2b995d116b5c2ff55ada87fcf5cdfe" not found in file cache

Full error message:

4:37:09 PM: Build ready to start
4:37:11 PM: build-image version: 2dbd444fcdce00cf06325060a8238d5ae3e86774
4:37:11 PM: build-image tag: v3.3.7
4:37:11 PM: buildbot version: 134ec431c6a3ff76e87cc4dc34007fe13842272f
4:37:11 PM: Fetching cached dependencies
4:37:11 PM: Starting to download cache of 253.3MB
4:37:12 PM: Finished downloading cache in 1.317095822s
4:37:12 PM: Starting to extract cache
4:37:20 PM: Finished extracting cache in 7.492992716s
4:37:20 PM: Finished fetching cache in 8.90172839s
4:37:20 PM: Starting to prepare the repo for build
4:37:20 PM: Preparing Git Reference refs/heads/master
4:37:23 PM: Starting build script
4:37:23 PM: Installing dependencies
4:37:23 PM: Started restoring cached node version
4:37:28 PM: Finished restoring cached node version
4:37:29 PM: v13.13.0 is already installed.
4:37:30 PM: Now using node v13.13.0 (npm v6.14.4)
4:37:30 PM: Attempting ruby version 2.6.2, read from environment
4:37:31 PM: Using ruby version 2.6.2
4:37:32 PM: Using PHP version 5.6
4:37:32 PM: Installing Hugo 0.69.0
4:37:32 PM: Hugo Static Site Generator v0.69.0-4205844B/extended linux/amd64 BuildDate: 2020-04-10T09:16:58Z
4:37:32 PM: Started restoring cached go cache
4:37:32 PM: Finished restoring cached go cache
4:37:32 PM: unset GOOS;
4:37:32 PM: unset GOARCH;
4:37:32 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
4:37:32 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
4:37:32 PM: go version >&2;
4:37:32 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
4:37:32 PM: go version go1.12 linux/amd64
4:37:32 PM: Installing missing commands
4:37:32 PM: Verify run directory
4:37:35 PM: Resolved Netlify Build version tag "latest" to "0.3.4"
4:37:35 PM: Netlify Build not installed. Installing Netlify Build version 0.3.4
4:37:59 PM: /opt/buildhome/.nvm/versions/node/v12.16.1/bin/netlify-build -> /opt/buildhome/.nvm/versions/node/v12.16.1/lib/node_modules/@netlify/build/src/core/bin.js
4:37:59 PM: + @netlify/build@0.3.4
4:37:59 PM: added 584 packages from 324 contributors in 23.482s
4:38:00 PM: Starting Netlify Build...
4:38:02 PM: ​
4:38:02 PM: ┌─────────────────────────────┐
4:38:02 PM: │        Netlify Build        │
4:38:02 PM: └─────────────────────────────┘
4:38:02 PM: ​
4:38:02 PM: ❯ Version
4:38:02 PM:   @netlify/build 0.3.4
4:38:02 PM: ​
4:38:02 PM: ❯ Flags
4:38:02 PM:   mode: buildbot
4:38:02 PM: ​
4:38:02 PM: ❯ Current directory
4:38:02 PM:   /opt/build/repo
4:38:02 PM: ​
4:38:02 PM: ❯ Config file
4:38:02 PM:   /opt/build/repo/netlify.toml
4:38:02 PM: ​
4:38:02 PM: ❯ Context
4:38:02 PM:   production
4:38:02 PM: ​
4:38:02 PM: ❯ Installing plugins
4:38:02 PM:    - netlify-plugin-debug-cache
4:38:04 PM: ​
4:38:04 PM: ❯ Loading plugins
4:38:04 PM:    - netlify-plugin-debug-cache@1.0.1
4:38:04 PM: ​
4:38:04 PM: ┌──────────────────────────────────────────────────────────────────┐
4:38:04 PM: │ 1. build.lifecycle.onBuild command from netlify.toml config file │
4:38:04 PM: └──────────────────────────────────────────────────────────────────┘
4:38:04 PM: ​
4:38:04 PM: $ hugo --gc --minify
4:38:05 PM: Building sites … Total in 189 ms
4:38:05 PM: Error: Error building site: POSTCSS: failed to transform "css/styles.css" (text/css): resource "css/css/styles.css_ae2b995d116b5c2ff55ada87fcf5cdfe" not found in file cache
4:38:05 PM: ​
4:38:05 PM: ┌──────────────────────────────────────────────────┐
4:38:05 PM: │ 2. onEnd command from netlify-plugin-debug-cache │
4:38:05 PM: └──────────────────────────────────────────────────┘
4:38:05 PM: ​
4:38:06 PM: Saving cache file manifest for debugging...
4:38:06 PM: Cache file count: 33831
4:38:06 PM: Cache manifest saved to public/cache-output.json
4:38:06 PM: Please download the build files to inspect cache-output.json.
4:38:06 PM: Instructions => http://bit.ly/netlify-dl-cache
4:38:06 PM: ​
4:38:06 PM: (netlify-plugin-debug-cache onEnd completed in 1.1s)
4:38:06 PM: ​
4:38:06 PM: ┌─────────────────────────────┐
4:38:06 PM: │        Build failed         │
4:38:06 PM: └─────────────────────────────┘
4:38:06 PM: ​
4:38:06 PM:   Error message
4:38:06 PM:   Command failed with exit code 255: hugo --gc --minify
4:38:06 PM: ​
4:38:06 PM:   Error location
4:38:06 PM:   In configuration "build.lifecycle.onBuild" command:
4:38:06 PM:   hugo --gc --minify
4:38:06 PM: ​
4:38:07 PM: Caching artifacts
4:38:07 PM: Started saving node modules
4:38:07 PM: Finished saving node modules
4:38:07 PM: Started saving pip cache
4:38:07 PM: Finished saving pip cache
4:38:07 PM: Started saving emacs cask dependencies
4:38:07 PM: Finished saving emacs cask dependencies
4:38:07 PM: Started saving maven dependencies
4:38:07 PM: Finished saving maven dependencies
4:38:07 PM: Started saving boot dependencies
4:38:07 PM: Finished saving boot dependencies
4:38:07 PM: Started saving go dependencies
4:38:07 PM: Finished saving go dependencies
4:38:07 PM: Error running command: Build script returned non-zero exit code: 1
4:38:07 PM: Failing build: Failed to build site
4:38:07 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
4:38:07 PM: Finished processing build request in 56.538763873s

I use:

  • Hugo 0.69.0
  • NodeJS 13

netlify.toml

[context.production.environment]
HUGO_VERSION = "0.69.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

NODE_VERSION = "13"

[build]
publish = "public"
command = "hugo --gc --minify"


[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"

On my local system when I either run

  • hugo server --disableFastRender --buildDrafts or
  • hugo --gc --minify or
  • hugo --gc --minify -e production

everything runs fine and let me see my page afterwards at localhost:1313.

There is the same question from a different user here. Unfortunately his solution, removing NODE_ENV=production, does not solve my problem.

The theme I’am using can be found here: GitHub - codedge/LoveIt

I ran the built multiple times, also with clearing the cache in between. Nothing helps.
Does anyone has a glimpse what could be the issue on Netlify here?

Thanks in advance!

2

hey there, sorry to be slow to get back to ya.

I’ve been thinking about this for a few days and you’ve already done a lot of great work figuring out the underlying error.

I am noticing that the filepath of the file its complaining about:
Error: Error building site: POSTCSS: failed to transform "css/styles.css" (text/css): resource "css/css/styles.css_ae2b995d116b5c2ff55ada87fcf5cdfe" not found in file cache

DOES have the folder css nested inside of another folder called css as per the path.

I can’t tell you exactly why this is happening but I think if you figure that out, you might have better luck - unless there is a reason why you would have a doubly-nested css folder. :thinking:

3

Hey Perry,

yes, I saw this as well. No there is no reason for a nested css folder. Tbh, I even don’t know where this is coming from. I went through the layout config files but nowhere is css/css/.. mentioned.
Furthermore there is still the fact, that it runs without issues on my local machine.

But me bugs is that

  • this line transform "css/styles.css" is from my layout (and it is correct)
  • that lineresource "css/css/styles.css_ae2b995d116b5c2ff55ada87fcf5cdfe" is made by the netlify build process

Not sure how to proceed, as I don’t get a start locally as no errors happens then. It’s only when Netlify builds it.

4

Hey @codedge,
Are you still running into this? I dug around a bit and it doesn’t seem be a Netlify-specific issue (though that certainly doesn’t rule out version mismatches, missing dependencies, etc. that could cause this):

One thing to check is whether your local Hugo version matches the one you’ve set in the netlify.toml? I do see that you’re using Hugo extended on the Xenial build image, and your toml otherwise looks good to me… :face_with_monocle:

5

Hi Jen,

yes, still running into this. I checked my local Hugo version which is

11:42:25 ➜ hugo version                                                                                                                                                   (develop|✔)
Hugo Static Site Generator v0.69.0/extended darwin/amd64 BuildDate: unknown

That is the same version that is set in my netlify.toml. So I don’t see that this is a problem with the Hugo version, or am I missing something?

What I also made sure is, that I do not run any extra pipelining/processing in production env. So the the issue with chaining you mentioned above is out of the game.

This is the part for the PostCSS stuff

{{ $css := resources.Get "css/styles.css" }}
{{ $css = $css | resources.PostCSS (dict "config" "./assets/css/postcss.config.js" "noMap" true) }}

<link href="{{ $css.RelPermalink }}" rel="stylesheet" />

which runs perfectly fine on my local setup.

Tbh, I am out of ideas where to look further and would be happy for any ideas.

6

Finally I was able to solve the problem. I am not completely sure why but I guess somehow my style.css inside the template folder could not be found. After moving the style.css out of the template folder and inside the assets/css it now works flawlessly.

Best and stay healthy!

7

oh, wow, how frustrating. thanks for sharing your solution and place stay healthy yourself!