Error: Input file contains unsupported image format, gatsby

I can build locally just fine. I’ve double checked that the image in question is in the repo.
Things I’ve tried: specifying each entry in my package.json one by one.
Also tried using a different image. This was building and deploying fine yesterday and the previous days for a couple months. Looking through all the commits I didn’t touch the files that reference this failing png image.

Relevant section from below:

10:52:38 AM: info bootstrap finished - 6.984 s
10:52:38 AM: ⠀
10:52:38 AM: error Failed to process image /opt/build/repo/static/img/home-comparison-beaker.png Input file contains unsupported image format
10:52:38 AM: 
10:52:38 AM:   Error: Input file contains unsupported image format
10:52:38 AM: 
10:52:38 AM: not finished run queries - 0.204s

I need advice to debug deploy https://app.netlify.com/sites/blissful-thompson-f27ba6/deploys/5e74cf7504ca720008459b5e

—begin entire build log—

10:51:16 AM: Build ready to start
10:51:18 AM: build-image version: 2dbd444fcdce00cf06325060a8238d5ae3e86774
10:51:18 AM: build-image tag: v3.3.7
10:51:18 AM: buildbot version: 11918e084194721d200458438c92ff8180b3b56c
10:51:18 AM: Fetching cached dependencies
10:51:18 AM: Starting to download cache of 303.9MB
10:51:20 AM: Finished downloading cache in 2.189943254s
10:51:20 AM: Starting to extract cache
10:51:29 AM: Finished extracting cache in 9.053371028s
10:51:29 AM: Finished fetching cache in 11.432478551s
10:51:29 AM: Starting to prepare the repo for build
10:51:30 AM: Preparing Git Reference refs/heads/master
10:51:33 AM: Found Netlify configuration file netlify.toml in site root
10:51:33 AM: Found Netlify configuration file(s). Overriding site configuration
10:51:33 AM: Different functions path detected, going to use the one specified in the Netlify configuration file: 'lambda' versus '' in the Netlify UI
10:51:33 AM: Creating functions prep folder
10:51:33 AM: Starting build script
10:51:33 AM: Installing dependencies
10:51:33 AM: Started restoring cached node version
10:51:36 AM: Finished restoring cached node version
10:51:38 AM: v10.19.0 is already installed.
10:51:39 AM: Now using node v10.19.0 (npm v6.13.4)
10:51:39 AM: Attempting ruby version 2.6.2, read from environment
10:51:40 AM: Using ruby version 2.6.2
10:51:40 AM: Using PHP version 5.6
10:51:40 AM: Started restoring cached node modules
10:51:40 AM: Finished restoring cached node modules
10:51:40 AM: Started restoring cached yarn cache
10:51:40 AM: Finished restoring cached yarn cache
10:51:41 AM: Installing NPM modules using Yarn version 1.9.4
10:51:42 AM: yarn install v1.9.4
10:51:42 AM: [1/4] Resolving packages...
10:51:45 AM: [2/4] Fetching packages...
10:51:45 AM: (node:1201) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
10:52:07 AM: info fsevents@2.1.2: The platform "linux" is incompatible with this module.
10:52:07 AM: info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
10:52:07 AM: info fsevents@1.2.9: The platform "linux" is incompatible with this module.
10:52:07 AM: info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
10:52:07 AM: [3/4] Linking dependencies...
10:52:07 AM: warning "gatsby > react-hot-loader@4.12.18" has unmet peer dependency "@types/react@^15.0.0 || ^16.0.0".
10:52:07 AM: warning "gatsby > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
10:52:07 AM: warning "gatsby > gatsby-cli > ink@2.6.0" has unmet peer dependency "@types/react@>=16.8.0".
10:52:07 AM: warning "gatsby > gatsby-cli > ink > auto-bind@3.0.0" has unmet peer dependency "@types/react@>=16.8.0".
10:52:07 AM: warning "gatsby-plugin-netlify > webpack-assets-manifest@3.1.1" has unmet peer dependency "webpack@>=4.4.0".
10:52:07 AM: warning "gatsby-plugin-sass > sass-loader@7.3.1" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
10:52:07 AM: warning " > lodash-webpack-plugin@0.11.5" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
10:52:07 AM: warning "netlify-cms-app > netlify-cms-widget-markdown > slate-edit-list@0.11.3" has incorrect peer dependency "slate@^0.32.0".
10:52:07 AM: warning "netlify-cms-app > netlify-cms-widget-markdown > slate-edit-table@0.15.2" has incorrect peer dependency "slate@^0.33.3".
10:52:07 AM: warning "netlify-cms-app > netlify-cms-widget-markdown > slate-edit-table@0.15.2" has unmet peer dependency "slate-schema-violations@^0.1.7".
10:52:07 AM: warning "netlify-cms-app > netlify-cms-core > redux-notifications > react-redux@4.4.10" has incorrect peer dependency "redux@^2.0.0 || ^3.0.0".
10:52:07 AM: warning " > netlify-cms-media-library-cloudinary@1.3.4" has unmet peer dependency "netlify-cms-lib-util@^2.1.3-beta.0".
10:52:20 AM: [4/4] Building fresh packages...
10:52:29 AM: success Saved lockfile.
10:52:29 AM: Done in 47.21s.
10:52:29 AM: NPM modules installed using Yarn
10:52:30 AM: Started restoring cached go cache
10:52:30 AM: Finished restoring cached go cache
10:52:30 AM: unset GOOS;
10:52:30 AM: unset GOARCH;
10:52:30 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
10:52:30 AM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
10:52:30 AM: go version >&2;
10:52:30 AM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
10:52:30 AM: go version go1.12 linux/amd64
10:52:30 AM: Installing missing commands
10:52:30 AM: Verify run directory
10:52:30 AM: Executing user command: npm run build
10:52:30 AM: > gatsby-starter-netlify-cms@1.1.3 build /opt/build/repo
10:52:30 AM: > npm run clean && gatsby build
10:52:30 AM: > gatsby-starter-netlify-cms@1.1.3 clean /opt/build/repo
10:52:30 AM: > gatsby clean
10:52:31 AM: info Deleting .cache, public
10:52:31 AM: info Successfully deleted directories
10:52:34 AM: success open and validate gatsby-configs - 0.059s
10:52:36 AM: success load plugins - 1.952s
10:52:36 AM: success onPreInit - 0.066s
10:52:36 AM: success delete html and css files from previous builds - 0.016s
10:52:36 AM: success initialize cache - 0.011s
10:52:36 AM: success copy gatsby files - 0.056s
10:52:36 AM: success onPreBootstrap - 0.003s
10:52:36 AM: success createSchemaCustomization - 0.012s
10:52:37 AM: success source and transform nodes - 0.780s
10:52:37 AM: success building schema - 0.471s
10:52:37 AM: success createPages - 0.121s
10:52:37 AM: success createPagesStatefully - 0.173s
10:52:37 AM: success onPreExtractQueries - 0.004s
10:52:37 AM: success update schema - 0.032s
10:52:38 AM: success extract queries from components - 0.491s
10:52:38 AM: success write out requires - 0.004s
10:52:38 AM: success write out redirect data - 0.001s
10:52:38 AM: warning The icon(src/img/icon.png) you provided to 'gatsby-plugin-manifest' is not square.
10:52:38 AM: The icons we generate will be square and for the best results we recommend you provide a square icon.
10:52:38 AM: success Build manifest and related icons - 0.147s
10:52:38 AM: success onPostBootstrap - 0.149s
10:52:38 AM: ⠀
10:52:38 AM: info bootstrap finished - 6.984 s
10:52:38 AM: ⠀
10:52:38 AM: error Failed to process image /opt/build/repo/static/img/home-comparison-beaker.png Input file contains unsupported image format
10:52:38 AM: 
10:52:38 AM:   Error: Input file contains unsupported image format
10:52:38 AM: 
10:52:38 AM: not finished run queries - 0.204s
10:52:38 AM: npm ERR! code ELIFECYCLE
10:52:38 AM: npm ERR! errno 1
10:52:38 AM: npm
10:52:38 AM: ERR!
10:52:38 AM:  gatsby-starter-netlify-cms@1.1.3 build: `npm run clean && gatsby build`
10:52:38 AM: npm
10:52:38 AM: ERR!
10:52:38 AM:  Exit status 1
10:52:38 AM: npm
10:52:38 AM: ERR!
10:52:38 AM: npm
10:52:38 AM: ERR!
10:52:38 AM:  Failed at the gatsby-starter-netlify-cms@1.1.3 build script.
10:52:38 AM: npm
10:52:38 AM: ERR!
10:52:38 AM:  This is probably not a problem with npm. There is likely additional logging output above.
10:52:38 AM: npm
10:52:38 AM: ERR!
10:52:38 AM:  A complete log of this run can be found in:
10:52:38 AM: npm
10:52:38 AM: ERR!
10:52:38 AM:      /opt/buildhome/.npm/_logs/2020-03-20T14_52_38_887Z-debug.log
10:52:38 AM: Function Dir: /opt/build/repo/lambda
10:52:38 AM: TempDir: /tmp/zisi-5e74d8647a83680008d769ef
10:52:39 AM: Prepping functions with zip-it-and-ship-it 0.3.1
10:52:40 AM: [ { path: '/tmp/zisi-5e74d8647a83680008d769ef/hello.zip',
10:52:40 AM:     runtime: 'js' } ]
10:52:40 AM: Prepping functions complete
10:52:40 AM: Caching artifacts
10:52:40 AM: Started saving node modules
10:52:40 AM: Finished saving node modules
10:52:40 AM: Started saving yarn cache
10:52:40 AM: Finished saving yarn cache
10:52:40 AM: Started saving pip cache
10:52:40 AM: Finished saving pip cache
10:52:40 AM: Started saving emacs cask dependencies
10:52:40 AM: Finished saving emacs cask dependencies
10:52:40 AM: Started saving maven dependencies
10:52:40 AM: Finished saving maven dependencies
10:52:40 AM: Started saving boot dependencies
10:52:40 AM: Finished saving boot dependencies
10:52:40 AM: Started saving go dependencies
10:52:40 AM: Finished saving go dependencies
10:52:40 AM: Error running command: Build script returned non-zero exit code: 1
10:52:40 AM: Failing build: Failed to build site
10:52:40 AM: failed during stage 'building site': Build script returned non-zero exit code: 1
10:52:40 AM: Finished processing build request in 1m22.283676601s

Hello @MikeMc, welcome!

The error log says enough, it seems like it doesn’t support the format? They should be square…

It supported it yesterday and the 40 days prior. Why would it stop supporting png images? Also it builds local. I’m thinking that it has something to do with creating the thumbnails, but I’m not sure what library does that. Seems like its blowing up on that step all of sudden, so maybe it’s a version problem with something in node_modules.

The issue is solved here:

Essentially I had to add

"resolutions": {
    "sharp": "0.24.0"
  },

to the package.json

Noob here on the community. How should I tag this and/or rewrite the question / subject so people with this error can find this better?

1 Like

that’s a great question, and thank you for answering it! The value of this forum rests on people being able to find information they need to solve problems they encounter as quickly as possible, after all!

first, if you have an error message, here, it is Error: Input file contains unsupported image format i would put that in the title of the post. That way, people who google error messages can find it right away.

I think a really good title for this thread would be something like:

"Error: Input file contains unsupported image format, gatsby" so that people can find things easier.

Secondly, I would indent your code, by placing three backticks: ` around it. (if you are needing to highlight a code snippet, one single backtick around a code chunk will do, but if its multiline, then 3.

Third, you already did the fantastic work of finding a solution, coming back, posting it, and marking your question as solved - this is great because it lets others know how to fix the problem.

thanks again for asking & being invested in having other people find solutions more easily :muscle:

Thanks @perry Done and Done

1 Like

no, thank you! :tada:

Hi @MikeMc - thanks for renaming the thread, I just found it by googling “Input file contains unsupported image format gatsby” and it fixed my problem too!

1 Like