Gatsby & Linaria build fails unless cache is cleared

Support
,
1

The website is feedsauce.netlify.app.

Build fails unless cache is cleared. I read the topic on that, but I don’t see any appropriate solution. It seems like Gatsby can’t find .linaria-cache which is in gitignore. I guess the fs is ephemeral and netlify restores it from some kind of snapshot, and linaria cache is created only when the build process is started.

Can't resolve '../../.linaria-cache/src/pages/404.linaria.css' in '/opt/build/repo/src/pages'

Locally, everything works fine. It also works fine if I redeploy with the cache cleared.

Here’s the log:

5:05:40 PM: Build ready to start
5:05:42 PM: build-image version: 653805ca4a64301556e56dc4b321ef8fc20cbb7c
5:05:42 PM: build-image tag: v3.8.2
5:05:42 PM: buildbot version: 27121fae4d1b3a5c621e9bbd5ca8c7f99e19f330
5:05:42 PM: Fetching cached dependencies
5:05:42 PM: Starting to download cache of 152.7MB
5:05:43 PM: Finished downloading cache in 703.543394ms
5:05:43 PM: Starting to extract cache
5:05:49 PM: Finished extracting cache in 5.758765805s
5:05:49 PM: Finished fetching cache in 6.508467853s
5:05:49 PM: Starting to prepare the repo for build
5:05:50 PM: Preparing Git Reference pull/1/head
5:05:50 PM: Parsing package.json dependencies
5:05:51 PM: Different build command detected, going to use the one specified in the Netlify configuration file: 'npm run build && cp ./static/_redirects_staging ./public/_redirects' versus 'npm run build' in the Netlify UI
5:05:51 PM: Starting build script
5:05:51 PM: Installing dependencies
5:05:51 PM: Python version set to 2.7
5:05:51 PM: Started restoring cached node version
5:05:54 PM: Finished restoring cached node version
5:05:54 PM: v12.18.0 is already installed.
5:05:55 PM: Now using node v12.18.0 (npm v6.14.4)
5:05:55 PM: Started restoring cached build plugins
5:05:55 PM: Finished restoring cached build plugins
5:05:55 PM: Attempting ruby version 2.7.2, read from environment
5:05:56 PM: Using ruby version 2.7.2
5:05:57 PM: Using PHP version 5.6
5:05:57 PM: Started restoring cached node modules
5:05:57 PM: Finished restoring cached node modules
5:05:57 PM: Started restoring cached go cache
5:05:57 PM: Finished restoring cached go cache
5:05:57 PM: go version go1.14.4 linux/amd64
5:05:57 PM: go version go1.14.4 linux/amd64
5:05:57 PM: Installing missing commands
5:05:57 PM: Verify run directory
5:05:58 PM: ​
5:05:58 PM: ────────────────────────────────────────────────────────────────
5:05:58 PM:   Netlify Build                                                 
5:05:58 PM: ────────────────────────────────────────────────────────────────
5:05:58 PM: ​
5:05:58 PM: ❯ Version
5:05:58 PM:   @netlify/build 17.9.2
5:05:58 PM: ​
5:05:58 PM: ❯ Flags
5:05:58 PM:   baseRelDir: true
5:05:58 PM:   deployId: 61116064be98900cbeb0bdd3
5:05:58 PM: ​
5:05:58 PM: ❯ Current directory
5:05:58 PM:   /opt/build/repo
5:05:58 PM: ​
5:05:58 PM: ❯ Config file
5:05:58 PM:   /opt/build/repo/netlify.toml
5:05:58 PM: ​
5:05:58 PM: ❯ Context
5:05:58 PM:   deploy-preview
5:05:58 PM: ​
5:05:58 PM: ❯ Loading plugins
5:05:58 PM:    - @netlify/plugin-gatsby@1.0.3 from netlify.toml and package.json
5:05:58 PM: ​
5:05:58 PM: ────────────────────────────────────────────────────────────────
5:05:58 PM:   1. onPreBuild command from @netlify/plugin-gatsby             
5:05:58 PM: ────────────────────────────────────────────────────────────────
5:05:58 PM: ​
5:05:59 PM: Found a Gatsby cache. We’re about to go FAST. ⚡️
5:05:59 PM: ​
5:05:59 PM: (@netlify/plugin-gatsby onPreBuild completed in 602ms)
5:05:59 PM: ​
5:05:59 PM: ────────────────────────────────────────────────────────────────
5:05:59 PM:   2. build.command from netlify.toml                            
5:05:59 PM: ────────────────────────────────────────────────────────────────
5:05:59 PM: ​
5:05:59 PM: $ npm run build && cp ./static/_redirects_staging ./public/_redirects
5:05:59 PM: > feedsauce-frontend@1.0.0 build /opt/build/repo
5:05:59 PM: > npm run test && npm run gatsby:build
5:05:59 PM: > feedsauce-frontend@1.0.0 test /opt/build/repo
5:05:59 PM: > npm run lint
5:06:00 PM: > feedsauce-frontend@1.0.0 lint /opt/build/repo
5:06:00 PM: > concurrently npm:type-check npm:prettier:check-all npm:eslint:check-all
5:06:00 PM: [prettier:check-all]
5:06:00 PM: [prettier:check-all] > feedsauce-frontend@1.0.0 prettier:check-all /opt/build/repo
5:06:00 PM: [prettier:check-all] > prettier --check .
5:06:00 PM: [prettier:check-all]
5:06:00 PM: [eslint:check-all]
5:06:00 PM: [eslint:check-all] > feedsauce-frontend@1.0.0 eslint:check-all /opt/build/repo
5:06:00 PM: [eslint:check-all] > eslint --ext .ts,.tsx,.js ./src
5:06:00 PM: [eslint:check-all]
5:06:00 PM: [type-check]
5:06:00 PM: [type-check] > feedsauce-frontend@1.0.0 type-check /opt/build/repo
5:06:00 PM: [type-check] > tsc
5:06:00 PM: [type-check]
5:06:01 PM: [prettier:check-all] Checking formatting...
5:06:02 PM: [prettier:check-all] All matched files use Prettier code style!
5:06:02 PM: [prettier:check-all] npm run prettier:check-all exited with code 0
5:06:04 PM: [eslint:check-all] npm run eslint:check-all exited with code 0
5:06:06 PM: [type-check] npm run type-check exited with code 0
5:06:06 PM: > feedsauce-frontend@1.0.0 gatsby:build /opt/build/repo
5:06:06 PM: > gatsby build
5:06:09 PM: success open and validate gatsby-configs, load plugins - 0.710s
5:06:09 PM: success onPreInit - 0.031s
5:06:09 PM: success initialize cache - 0.005s
5:06:09 PM: success copy gatsby files - 0.070s
5:06:10 PM: success Compiling Gatsby Functions - 0.287s
5:06:10 PM: success onPreBootstrap - 0.304s
5:06:10 PM: success createSchemaCustomization - 0.004s
5:06:10 PM: success Checking for changed pages - 0.000s
5:06:10 PM: success source and transform nodes - 0.153s
5:06:11 PM: success building schema - 1.403s
5:06:11 PM: success createPages - 0.000s
5:06:12 PM: success createPagesStatefully - 0.204s
5:06:12 PM: info Total nodes: 38, SitePage nodes: 3 (use --verbose for breakdown)
5:06:12 PM: success Checking for changed pages - 0.000s
5:06:12 PM: success Cleaning up stale page-data - 0.001s
5:06:12 PM: success update schema - 0.197s
5:06:12 PM: success onPreExtractQueries - 0.000s
5:06:13 PM: success extract queries from components - 0.994s
5:06:13 PM: success write out redirect data - 0.075s
5:06:13 PM: success onPostBootstrap - 0.001s
5:06:13 PM: info bootstrap finished - 6.695s
5:06:13 PM: success write out requires - 0.097s
5:06:21 PM: failed Building production JavaScript and CSS bundles - 7.623s
5:06:21 PM: error Generating JavaScript bundles failed
5:06:21 PM: Can't resolve '../../.linaria-cache/src/pages/404.linaria.css' in '/opt/build/repo/src/pages'
5:06:21 PM: If you're trying to use a package make sure that '../../.linaria-cache/src/pages/404.linaria.css' is installed. If you're trying to use a local file make sure that the path is correct.
5:06:21 PM: npm ERR! code ELIFECYCLE
5:06:21 PM: npm ERR! errno 1
5:06:21 PM: npm ERR! feedsauce-frontend@1.0.0 gatsby:build: `gatsby build`
5:06:21 PM: npm ERR! Exit status 1
5:06:21 PM: npm ERR!
5:06:21 PM: npm ERR! Failed at the feedsauce-frontend@1.0.0 gatsby:build script.
5:06:21 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
5:06:21 PM: npm ERR! A complete log of this run can be found in:
5:06:21 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-08-09T17_06_21_145Z-debug.log
5:06:21 PM: npm ERR! code ELIFECYCLE
5:06:21 PM: npm ERR! errno 1
5:06:21 PM: npm ERR! feedsauce-frontend@1.0.0 build: `npm run test && npm run gatsby:build`
5:06:21 PM: npm ERR! Exit status 1
5:06:21 PM: npm ERR!
5:06:21 PM: npm ERR! Failed at the feedsauce-frontend@1.0.0 build script.
5:06:21 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
5:06:21 PM: npm ERR! A complete log of this run can be found in:
5:06:21 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-08-09T17_06_21_167Z-debug.log
5:06:21 PM: ​
5:06:21 PM: ────────────────────────────────────────────────────────────────
5:06:21 PM:   "build.command" failed                                        
5:06:21 PM: ────────────────────────────────────────────────────────────────
5:06:21 PM: ​
5:06:21 PM:   Error message
5:06:21 PM:   Command failed with exit code 1: npm run build && cp ./static/_redirects_staging ./public/_redirects
5:06:21 PM: ​
5:06:21 PM:   Error location
5:06:21 PM:   In build.command from netlify.toml:
5:06:21 PM:   npm run build && cp ./static/_redirects_staging ./public/_redirects
5:06:21 PM: ​
5:06:21 PM:   Resolved config
5:06:21 PM:   build:
5:06:21 PM:     command: npm run build && cp ./static/_redirects_staging ./public/_redirects
5:06:21 PM:     commandOrigin: config
5:06:21 PM:     environment:
5:06:21 PM:       - REVIEW_ID
5:06:21 PM:     publish: /opt/build/repo/public
5:06:21 PM:     publishOrigin: config
5:06:21 PM:   plugins:
5:06:21 PM:     - inputs: {}
5:06:21 PM:       origin: config
5:06:21 PM:       package: '@netlify/plugin-gatsby'
5:06:21 PM:   redirects:
5:06:21 PM:     - from: /api/*      to: https://feedsauce.herokuapp.com/:splat    - from: /api/*      status: 200      to: /.netlify/functions/gatsbyCaching artifacts
5:06:21 PM: Started saving node modules
5:06:21 PM: Finished saving node modules
5:06:21 PM: Started saving build plugins
5:06:21 PM: Finished saving build plugins
5:06:21 PM: Started saving pip cache
5:06:21 PM: Finished saving pip cache
5:06:21 PM: Started saving emacs cask dependencies
5:06:21 PM: Finished saving emacs cask dependencies
5:06:21 PM: Started saving maven dependencies
5:06:21 PM: Finished saving maven dependencies
5:06:21 PM: Started saving boot dependencies
5:06:21 PM: Finished saving boot dependencies
5:06:21 PM: Started saving rust rustup cache
5:06:21 PM: Finished saving rust rustup cache
5:06:21 PM: Started saving go dependencies
5:06:21 PM: Finished saving go dependencies
5:06:21 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
5:06:21 PM: Creating deploy upload records
5:06:21 PM: Failing build: Failed to build site
5:06:21 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
5:06:22 PM: Finished processing build request in 39.239744708s
3

I was able to fix the problem. Here’s what I did:

"postinstall": "npm run build",

Yes, this is a dirty solution. But the only penalty is sub-optimal first build time, any subsequent builds will take no performance penalty. Also, even though the build command is executed two times, the second build will be quicker because Netlify will always find Gatsby cache since it was just generated.

4

The solution with running build in postinstall somehow broke for no apparent reason. Here’s the more stable one, although also not super-clean:

"prebuild": "shx rm -rf public && shx rm -rf .cache"

I use shx to run commands to achieve cross-compatibility between different platforms our developers use.

I hope Netlify will improve their compatibility with solutions such as Linaria that rely on file system cache.