Gatsby default starter throws "unsupported image format" error.

[spence-s]

Description

Immediately after running

gatsby new test-project
cd test-project
gatsby develop

There are build errors:

This also occurs with the blog starter.

Incredibly frustrating when trying to migrate a site to gatsby and not being able to get past step 1.

Steps to reproduce

gatsby new test-project
cd test-project
gatsby develop

Expected result

No errors and image/icon should load.

Actual result

Saw errors and manifest did not build correctly. I also could not run a build command successfully.

Environment

System:
OS: macOS 10.15.2
CPU: (4) x64 Intel(R) Core(TM) i5-4288U CPU @ 2.60GHz
Shell: 5.7.1 - /usr/local/bin/zsh
Binaries:
Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
Yarn: 1.21.1 - ~/.nvm/versions/node/v12.14.1/bin/yarn
npm: 6.13.6 - ~/.nvm/versions/node/v12.14.1/bin/npm
Languages:
Python: 2.7.17 - /usr/local/bin/python
Browsers:
Chrome: 79.0.3945.130
Safari: 13.0.4
npmPackages:
gatsby: ^2.18.12 => 2.18.12
gatsby-image: ^2.2.34 => 2.2.34
gatsby-plugin-manifest: ^2.2.31 => 2.2.31
gatsby-plugin-offline: ^3.0.27 => 3.0.27
gatsby-plugin-react-helmet: ^3.1.16 => 3.1.16
gatsby-plugin-sharp: ^2.3.5 => 2.3.5
gatsby-source-filesystem: ^2.1.40 => 2.1.40
gatsby-transformer-sharp: ^2.3.7 => 2.3.7

[LekoArts]

Hi, thanks for the issue! I followed your steps and can't reproduce the problem (with same Node version etc.). Please make sure that you have the mandatory libs installed to run sharp:

https://www.gatsbyjs.org/tutorial/part-zero/#install-xcode-command-line-tools

[spence-s]

@LekoArts Thanks for the quick response here.

I do have the xcode-select tools installed. I thought there may be a problem there so I removed them and Xcode and reinstalled, but unfortunately, that did not fix my problem. I also cleaned my yarn cache and tried using npm to install instead of yarn, but that did not correct the problem either.

I then changed the images to jpg formats for both the manifest icon and the image that comes in the default starter. It worked then as expected with the jpg format. So It seems there is an issue for me with png format specifically.

I do have libpng installed via brew and on sharp installation (from running npm install) I did notice some output that may be of interest.

So far there is no resolution on this from my end. Any more ideas?

[spence-s]

I think this actually may be related to lovell/sharp#2023

[spence-s]

rm -rf node_modules &&
SHARP_IGNORE_GLOBAL_LIBVIPS=true yarn

resolved the issue.

This will affect anyone who has vips installed via brew or some other form as brew will automatically update global vips to the unsupport 8.9 version.

[LekoArts]

Glad you were able to sort it out and thanks for posting your solution!

[pascalwhoop]

This doesn't only affect mac users. I'm on linux (manjaro) with libvips installed and it's also crashing there. Your ENV var helped though.

$ pacman -iQ libvips
Name            : libvips
Version         : 8.9.0-1
Description     : A fast image processing library with low memory needs
Architecture    : x86_64
URL             : https://libvips.github.io/libvips/
Licenses        : LGPL
Groups          : None
Provides        : None
Depends On      : cfitsio  fftw  imagemagick  libexif  libimagequant  libwebp  libxml2  openexr  orc  pango
Optional Deps   : None
Required By     : signal-desktop
Optional For    : None
Conflicts With  : None
Replaces        : None
Installed Size  : 7.39 MiB
Packager        : Felix Yan <[email protected]>
Build Date      : Sat 18 Jan 2020 03:53:10 PM CET
Install Date    : Fri 31 Jan 2020 12:32:42 PM CET
Install Reason  : Installed as a dependency for another package
Install Script  : No
Validated By    : Signature