Gatsby + Wordpress | Deploy works manually but not with buildbot | Gatsby source wordpress | unsupported image file error

Overview

I’m trying to deploy my website on Netlify. It source data from wordpress via graphql with gatsby source wordpress v4. Here is the website where i take data from.

I can build site locally, can deploy it manually on netlify with netlify deploy --prod , but can’t build when triggering from CI/CD

The error i get is:

error [object Object] Input file contains unsupported image format
Error: Input file contains unsupported image format

I need advice to debug deploy https://app.netlify.com/sites/wonderful-kepler-5e8164/deploys/5fc627aed1f92d000856d4e9

Steps to reproduce

  1. Clone this Github repo
  2. npm install
  3. Deploy to netlify

What I’ve tried

I’ve already tried the most common fixes found online but can’t really fix it:

  • Added “resolutions” to sharp in package.json
  • Looked for .ico file
  • Removed all media on Wordpress MediaItem which isn’t an image

Full error log

12:31:33 PM: Build ready to start
12:31:34 PM: build-image version: 09c2cdcdf242cf2f57c9ee0fcad9d298fad9ad41
12:31:34 PM: build-image tag: v3.5.0
12:31:34 PM: buildbot version: 8df8a50b1177b0b57364d20e0ea150448924cebf
12:31:34 PM: Fetching cached dependencies
12:31:34 PM: Failed to fetch cache, continuing with build
12:31:34 PM: Starting to prepare the repo for build
12:31:35 PM: No cached dependencies found. Cloning fresh repo
12:31:35 PM: git clone [https://github.com/SRFeesha/wonder-website](https://github.com/SRFeesha/wonder-website)
12:31:36 PM: Preparing Git Reference refs/heads/master
12:31:37 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'public' versus 'public/' in the Netlify UI
12:31:37 PM: Starting build script
12:31:37 PM: Installing dependencies
12:31:37 PM: Python version set to 2.7
12:31:39 PM: v12.18.0 is already installed.
12:31:39 PM: Now using node v12.18.0 (npm v6.14.4)
12:31:39 PM: Started restoring cached build plugins
12:31:39 PM: Finished restoring cached build plugins
12:31:39 PM: Attempting ruby version 2.7.1, read from environment
12:31:41 PM: Using ruby version 2.7.1
12:31:41 PM: Using PHP version 5.6
12:31:41 PM: Started restoring cached node modules
12:31:41 PM: Finished restoring cached node modules
12:31:41 PM: Installing NPM modules using NPM version 6.14.4
12:32:29 PM: > yarn@1.22.10 preinstall /opt/build/repo/node_modules/yarn
12:32:29 PM: > :; (node ./preinstall.js > /dev/null 2>&1 || true)
12:32:33 PM: > bufferutil@4.0.2 install /opt/build/repo/node_modules/bufferutil
12:32:33 PM: > node-gyp-build
12:32:33 PM: > utf-8-validate@5.0.3 install /opt/build/repo/node_modules/utf-8-validate
12:32:33 PM: > node-gyp-build
12:32:34 PM: > sharp@0.25.4 install /opt/build/repo/node_modules/gatsby-transformer-sharp/node_modules/sharp
12:32:34 PM: > (node install/libvips && node install/dll-copy && prebuild-install --runtime=napi) || (node-gyp rebuild && node install/dll-copy)
12:32:35 PM: info sharp Downloading [https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-linux-x64.tar.gz](https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-linux-x64.tar.gz)
12:32:36 PM: > sharp@0.26.3 install /opt/build/repo/node_modules/sharp
12:32:36 PM: > (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
12:32:37 PM: info sharp Downloading [https://github.com/lovell/sharp-libvips/releases/download/v8.10.0/libvips-8.10.0-linux-x64.tar.br](https://github.com/lovell/sharp-libvips/releases/download/v8.10.0/libvips-8.10.0-linux-x64.tar.br)
12:32:40 PM: > core-js@2.6.12 postinstall /opt/build/repo/node_modules/babel-runtime/node_modules/core-js
12:32:40 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:32:40 PM: > core-js@3.8.0 postinstall /opt/build/repo/node_modules/core-js
12:32:40 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:32:40 PM: > core-js-pure@3.8.0 postinstall /opt/build/repo/node_modules/core-js-pure
12:32:40 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:32:42 PM: > gatsby-telemetry@1.5.1 postinstall /opt/build/repo/node_modules/gatsby-telemetry
12:32:42 PM: > node src/postinstall.js || true
12:32:42 PM: > mozjpeg@7.0.0 postinstall /opt/build/repo/node_modules/mozjpeg
12:32:42 PM: > node lib/install.js
12:32:42 PM:   ✔ mozjpeg pre-build test passed successfully
12:32:42 PM: > pngquant-bin@6.0.0 postinstall /opt/build/repo/node_modules/pngquant-bin
12:32:42 PM: > node lib/install.js
12:32:42 PM:   ✔ pngquant pre-build test passed successfully
12:32:43 PM: > gatsby-cli@2.14.1 postinstall /opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli
12:32:43 PM: > node scripts/postinstall.js
12:32:43 PM: > gatsby@2.27.5 postinstall /opt/build/repo/node_modules/gatsby
12:32:43 PM: > node scripts/postinstall.js
12:32:46 PM: npm WARN wonderflow-website-gatsby@0.0.1 No repository field.
12:32:46 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
12:32:46 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
12:32:46 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/chokidar/node_modules/fsevents):
12:32:46 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
12:32:46 PM: added 2805 packages from 1338 contributors and audited 2819 packages in 63.715s
12:32:48 PM: 165 packages are looking for funding
12:32:48 PM:   run `npm fund` for details
12:32:48 PM: found 0 vulnerabilities
12:32:49 PM: NPM modules installed
12:32:49 PM: Started restoring cached go cache
12:32:49 PM: Finished restoring cached go cache
12:32:49 PM: go version go1.14.4 linux/amd64
12:32:49 PM: go version go1.14.4 linux/amd64
12:32:49 PM: Installing missing commands
12:32:49 PM: Verify run directory
12:32:51 PM: 
12:32:51 PM: ────────────────────────────────────────────────────────────────
12:32:51 PM:   Netlify Build
12:32:51 PM: ────────────────────────────────────────────────────────────────
12:32:51 PM: 
12:32:51 PM: ❯ Version
12:32:51 PM:   @netlify/build 5.3.3
12:32:51 PM: 
12:32:51 PM: ❯ Flags
12:32:51 PM:   deployId: 5fc6299428024c00086c2952
12:32:51 PM:   mode: buildbot
12:32:51 PM: 
12:32:51 PM: ❯ Current directory
12:32:51 PM:   /opt/build/repo
12:32:51 PM: 
12:32:51 PM: ❯ Config file
12:32:51 PM:   No config file was defined: using default values.
12:32:51 PM: 
12:32:51 PM: ❯ Context
12:32:51 PM:   production
12:32:51 PM: 
12:32:51 PM: ────────────────────────────────────────────────────────────────
12:32:51 PM:   1. Build command from Netlify app
12:32:51 PM: ────────────────────────────────────────────────────────────────
12:32:51 PM: 
12:32:51 PM: $ npm run build
12:32:51 PM: > wonderflow-website-gatsby@0.0.1 build /opt/build/repo
12:32:51 PM: > gatsby build
12:32:54 PM: success open and validate gatsby-configs - 0.037s
12:32:55 PM: success load plugins - 0.866s
12:32:55 PM: success onPreInit - 0.105s
12:32:55 PM: success delete html and css files from previous builds - 0.003s
12:32:55 PM: success initialize cache - 0.008s
12:32:55 PM: success copy gatsby files - 0.032s
12:32:55 PM: success onPreBootstrap - 0.014s
12:32:58 PM: ⠀
12:32:58 PM: info  gatsby-source-wordpress
12:32:58 PM: 	This is either your first build or the cache was cleared.
12:32:58 PM: 	Please wait while your WordPress data is synced to your Gatsby cache.
12:32:58 PM: 	Maybe now's a good time to get up and stretch? :D
12:33:00 PM: success  gatsby-source-wordpress  writing GraphQL queries to disk at ./WordPress/GraphQL/ - 0.300s
12:33:00 PM: success  gatsby-source-wordpress  ingest WPGraphQL schema - 2.800s
12:33:00 PM: success createSchemaCustomization - 4.786s
12:33:01 PM: success  gatsby-source-wordpress  fetch root fields - 1.230s
12:33:01 PM: success  gatsby-source-wordpress  Comment - 1.232s - fetched 0
12:33:02 PM: success  gatsby-source-wordpress  Menu - 1.644s - fetched 3
12:33:02 PM: success  gatsby-source-wordpress  UserRole - 1.766s - fetched 0
12:33:02 PM: success  gatsby-source-wordpress  PostFormat - 2.266s - fetched 4
12:33:02 PM: success  gatsby-source-wordpress  Taxonomy - 2.428s - fetched 3
12:33:02 PM: success  gatsby-source-wordpress  MenuItem - 2.597s - fetched 18
12:33:03 PM: success  gatsby-source-wordpress  Tag - 3.548s - fetched 161
12:33:05 PM: success  gatsby-source-wordpress  ContentType - 5.128s - fetched 3
12:33:05 PM: success  gatsby-source-wordpress  Category - 5.192s - fetched 20
12:33:05 PM: success  gatsby-source-wordpress  User - 5.253s - fetched 8
12:33:08 PM: success  gatsby-source-wordpress  Post - 8.172s - fetched 100
12:33:12 PM: success  gatsby-source-wordpress  Page - 11.643s - fetched 92
12:33:15 PM: error [object Object] Input file contains unsupported image format
12:33:15 PM:
12:33:15 PM:
12:33:15 PM:   Error: Input file contains unsupported image format
12:33:15 PM:
12:33:15 PM: not finished source and transform nodes - 15.346s
12:33:15 PM: not finished  gatsby-source-wordpress  fetching nodes - 15.279s - 428 total
12:33:15 PM: not finished  gatsby-source-wordpress  creating nodes - 3.631s
12:33:15 PM: not finished  gatsby-source-wordpress  MediaItem - 3.631s - fetched 16
12:33:15 PM: not finished Downloading remote files - 1.252s
12:33:15 PM: npm ERR! code ELIFECYCLE
12:33:15 PM: npm ERR! errno 1
12:33:15 PM: npm ERR! wonderflow-website-gatsby@0.0.1 build: `gatsby build`
12:33:15 PM: npm ERR! Exit status 1
12:33:15 PM: npm ERR!
12:33:15 PM: npm ERR! Failed at the wonderflow-website-gatsby@0.0.1 build script.
12:33:15 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
12:33:15 PM: npm ERR! A complete log of this run can be found in:
12:33:15 PM: npm ERR!     /opt/buildhome/.npm/_logs/2020-12-01T11_33_15_718Z-debug.log
12:33:15 PM: 
12:33:15 PM: ────────────────────────────────────────────────────────────────
12:33:15 PM:   "build.command" failed
12:33:15 PM: ────────────────────────────────────────────────────────────────
12:33:15 PM: 
12:33:15 PM:   Error message
12:33:15 PM:   Command failed with exit code 1: npm run build
12:33:15 PM: 
12:33:15 PM:   Error location
12:33:15 PM:   In Build command from Netlify app:
12:33:15 PM:   npm run build
12:33:15 PM: 
12:33:15 PM:   Resolved config
12:33:15 PM:   build:
12:33:15 PM:     command: npm run build
12:33:15 PM:     commandOrigin: ui
12:33:15 PM:     publish: /opt/build/repo/public
12:33:15 PM: Caching artifacts
12:33:15 PM: Started saving node modules
12:33:15 PM: Finished saving node modules
12:33:15 PM: Started saving build plugins
12:33:15 PM: Finished saving build plugins
12:33:15 PM: Started saving pip cache
12:33:16 PM: Finished saving pip cache
12:33:16 PM: Started saving emacs cask dependencies
12:33:16 PM: Finished saving emacs cask dependencies
12:33:16 PM: Started saving maven dependencies
12:33:16 PM: Finished saving maven dependencies
12:33:16 PM: Started saving boot dependencies
12:33:16 PM: Finished saving boot dependencies
12:33:16 PM: Started saving go dependencies
12:33:16 PM: Finished saving go dependencies
12:33:19 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
12:33:19 PM: Failing build: Failed to build site
12:33:19 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
12:33:19 PM: Finished processing build request in 1m44.415519239s

Let me know if anything else could help — and thank you for reading until here! (and if you skipped until here, thank you anyway!)

I’ve managed to deploy on Netlify. Note, is not a proper fix, just a workaround.

I’ve tried to make a minimum reproducible repo and that leads me to the fact that sharp was causing the problem.
I’ve updated gatsby-transofrmer-sharp to version 2.7.0 and set the flag of failOnError to false

{
    resolve: `gatsby-plugin-sharp`,
    options: {
      failOnError: false
    }
},

That made me compile — hopefully that could helps other too :slight_smile:

btw I’ll continue my research because I feel it’s just a workaround, gonna open an issue on sharp in the next hours.

sounds good! glad you found a workaround. Out of curiosity, what was the image format? :thinking:

I haven’t identified the problematic image, but one of my steps in the debug process was load all images in .jpg or .png in order to exclude problems related to images format

1 Like