Gatsby: chore(image-sharp/vips): ERROR Failed to process image ... Input file contains unsupported image format

[muescha]

Description

ERROR
Failed to process image 
/Users/muescha/Work/gatsby/github/gatsby/docs/docs/images/gatsby-default-404.png 
Input file contains unsupported image format

Steps to reproduce

• checkout gatsby
• cd www
• run gatsby develop

Expected result

no error

Actual result

i got the error

Tried steps

• i checked out an older commit (from december 2019) but error still exists
• upgraded vips from 8.9.0 to 8.9.1

vips --version
vips-8.9.0-Mon Jan  6 14:10:21 UTC 2020

upgraded to:

vips --version
vips-8.9.1-Tue Jan 28 13:05:46 UTC 2020

Environment

  System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-3820QM CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.130
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.18.8 => 2.18.18 
    gatsby-design-tokens: ~1.0.10 => 1.0.10 
    gatsby-image: ^2.2.34 => 2.2.37 
    gatsby-plugin-canonical-urls: ^2.1.16 => 2.1.18 
    gatsby-plugin-catch-links: ^2.1.19 => 2.1.21 
    gatsby-plugin-emotion: ^4.1.16 => 4.1.18 
    gatsby-plugin-feed: ^2.3.23 => 2.3.25 
    gatsby-plugin-google-analytics: ^2.1.29 => 2.1.31 
    gatsby-plugin-google-tagmanager: ^2.1.18 => 2.1.20 
    gatsby-plugin-guess-js: ^1.1.26 => 1.1.28 
    gatsby-plugin-layout: ^1.1.16 => 1.1.18 
    gatsby-plugin-mailchimp: ^2.2.3 => 2.2.3 
    gatsby-plugin-manifest: ^2.2.31 => 2.2.34 
    gatsby-plugin-mdx: ^1.0.59 => 1.0.64 
    gatsby-plugin-netlify: ^2.1.28 => 2.1.30 
    gatsby-plugin-netlify-cache: ^0.1.0 => 0.1.0 
    gatsby-plugin-nprogress: ^2.1.15 => 2.1.17 
    gatsby-plugin-offline: ^3.0.27 => 3.0.30 
    gatsby-plugin-react-helmet: ^3.1.16 => 3.1.18 
    gatsby-plugin-sharp: ^2.3.5 => 2.3.10 
    gatsby-plugin-sitemap: ^2.2.22 => 2.2.24 
    gatsby-plugin-theme-ui: ^0.2.43 => 0.2.43 
    gatsby-plugin-twitter: ^2.1.15 => 2.1.17 
    gatsby-plugin-typography: ^2.3.18 => 2.3.20 
    gatsby-remark-autolink-headers: ^2.1.19 => 2.1.22 
    gatsby-remark-code-titles: ^1.1.0 => 1.1.0 
    gatsby-remark-copy-linked-files: ^2.1.31 => 2.1.33 
    gatsby-remark-embedder: ^1.11.0 => 1.11.0 
    gatsby-remark-graphviz: ^1.1.18 => 1.1.20 
    gatsby-remark-images: ^3.1.35 => 3.1.39 
    gatsby-remark-normalize-paths: ^1.0.0 => 1.0.0 
    gatsby-remark-prismjs: ^3.3.25 => 3.3.29 
    gatsby-remark-responsive-iframe: ^2.2.28 => 2.2.30 
    gatsby-remark-smartypants: ^2.1.17 => 2.1.19 
    gatsby-source-airtable: ^2.0.12 => 2.0.12 
    gatsby-source-filesystem: ^2.1.40 => 2.1.43 
    gatsby-source-git: ^1.0.2 => 1.0.2 
    gatsby-source-npm-package-search: ^2.1.19 => 2.1.21 
    gatsby-transformer-csv: ^2.1.19 => 2.1.21 
    gatsby-transformer-documentationjs: ^4.1.20 => 4.1.22 
    gatsby-transformer-remark: ^2.6.39 => 2.6.45 
    gatsby-transformer-screenshot: ^2.1.44 => 2.1.46 
    gatsby-transformer-sharp: ^2.3.7 => 2.3.9 
    gatsby-transformer-yaml: ^2.2.18 => 2.2.20 
  npmGlobalPackages:
    gatsby-cli: 2.8.13

vips --version
vips-8.9.1-Tue Jan 28 13:05:46 UTC 2020

Note

i see the error here:
https://github.com/lovell/sharp/blob/1a98c390fce9ad333b1c7db2c432f8c9491ad5d1/src/common.cc#L337

[muescha]

downgrading to 8.8.4 works (https://github.com/Homebrew/homebrew-core/blob/32e25d4e45d145b6a26791d084d823226070409c/Formula/vips.rb):

brew uninstall --force vips

# binary sha256 mismatch - but building from source works
brew install https://raw.githubusercontent.com/Homebrew/homebrew-core/32e25d4e45d145b6a26791d084d823226070409c/Formula/vips.rb --force

rm -rf node_modules/
yarn install

or did i missed the new yarn/npm install after vips upgrade to 8.9.1? i tried and no change - i will go back to 8.8.4

[muescha]

@lovell comment https://github.com/lovell/sharp/issues/2062#issuecomment-580189056

There was a small breaking change in vips v8.9.0 that means you'll need sharp v0.24.0 to process PNG files.

so i need to wait if v0.24 is available in gatsby dependencies

[pieh]

While not proper fix (we need to bump sharp) - but until it's fixed you can workaround this by using yarn + resolutions, by adding:

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

to your package.json

[freiksenet]

Adding that we can't bump sharp because it requires node 10 and we officially support node 8. We will update it when we drop node 8 support.

[lougroshek]

Thanks @muescha. I had this error today with every starter kit I tried, and even plain old gatsby new site. Glad I found this.

[brandoncc]

Thank you @pieh!

[dcorb]

What solution for npm users ? @pieh