Running "develop" or "build" in a newly created site throws an error related to image format

[aggregat4]

Description

After running npx gatsby new blog and then going into the blog directory and running npm run develop or npm run build I get an error during build:

ERROR #11321  PLUGIN

"gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:

Input file contains unsupported image format

When running develop it additionally logs:

 ERROR 

Failed to retrieve metadata from image /home/REDACTED/dev/projects/blog/src/images/gatsby-astronaut.png Input file contains unsupported image format



  Error: Input file contains unsupported image format


 ERROR #85925  GRAPHQL

There was an error in your GraphQL query:

Cannot return null for non-nullable field ImageSharpFluid.aspectRatio.

The field "ImageSharpFluid.aspectRatio." was explicitly defined as non-nullable via the schema customization API (by yourself or a plugin/theme). This means that this field is not optional and you have to define a value. If this is not your desired behavior and you defined the schema yourself, go to "createTypes" in gatsby-node.js. If you're using a plugin/theme, you can learn more here on how to fix field types:
https://www.gatsbyjs.org/docs/schema-customization/#fixing-field-types

   1 | fragment GatsbyImageSharpFluid on ImageSharpFluid {
   2 |   base64
>  3 |   aspectRatio
     |   ^
   4 |   src
   5 |   srcSet
   6 |   sizes
   7 | }
   8 |
   9 | query homeREDACTEDdevprojectsblogsrccomponentsimageJs2969191536 {
  10 |   placeholderImage: file(relativePath: {eq: "gatsby-astronaut.png"}) {
  11 |     id
  12 |     childImageSharp {
  13 |       id

File path: /home/REDACTED/dev/projects/blog/src/components/image.js
Plugin: none

Steps to reproduce

1. run npx gatsby new blog
2. go into the blog directory and run npm run develop or npm run build

Expected result

The error mentioned above should not occur

Actual result

The error occurred

Environment

  System:
    OS: Linux 5.5 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.6.0 - ~/.nvm/versions/node/v13.6.0/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v13.6.0/bin/npm
  Languages:
    Python: 3.8.1 - /usr/bin/python
  npmPackages:
    gatsby: ^2.19.7 => 2.19.7
    gatsby-image: ^2.2.39 => 2.2.39
    gatsby-plugin-manifest: ^2.2.39 => 2.2.39
    gatsby-plugin-offline: ^3.0.32 => 3.0.32
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21
    gatsby-plugin-sharp: ^2.4.3 => 2.4.3
    gatsby-source-filesystem: ^2.1.46 => 2.1.46
    gatsby-transformer-sharp: ^2.3.13 => 2.3.13

[vladar]

Sounds like a duplicate of #20698 ?

You probably have a libvips 8.9.0+ installed globally which seems to cause this issue. In this case, the solution proposed in the linked issue should help you:

rm -rf node_modules &&
SHARP_IGNORE_GLOBAL_LIBVIPS=true yarn

[aggregat4]

Confirmed: set that environment variable and redid the npx gatsby new ... and npm run develop dance and it works. Sorry, I did look for similar issues but somehow that did not come up. Thanks!