Gatsby build always throwing Input file is missing or of an unsupported image format

Question

The full description of the issue can be found here https://github.com/gatsbyjs/gatsby/issues/5638

In short, I am using gatsby-plugin-remark and gatsby-transformer-remark to optimize images placed within frontmatter of md files.

Say my markdown file has

---
title: Beautiful UI
featured_image: ../../images/project-vscbui.png
subtitle: A set of color themes for VSCode
order: 90
link: https://vscbui.rocks
templateKey: projects
---

...

And I query it like

export const projectQuery = graphql`
  query ProjectQuery {
    projects: allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___order] }
      filter: { frontmatter: { templateKey: { eq: "projects" } } }
      limit: 1000
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            subtitle
            featured_image {
              childImageSharp {
                sizes(maxWidth: 960) {
                  ...GatsbyImageSharpSizes
                }
              }
            }
            link
          }
          html
        }
      }
    }
    site {
      siteMetadata {
        shortTitle
      }
    }
  }
`;

gatsby develop works just fine. But when I run gatsby build, it fails giving errors

success Building static HTML for pages — 3.818 s
error Input file is missing or of an unsupported image format


  Error: Input file is missing or of an unsupported image format

error UNHANDLED REJECTION


  Error: Input file is missing or of an unsupported image format

Although the build actually works just fine.

To reproduce, please fork this repository https://github.com/swashata/swas.io and run yarn build. An error log can also be found here https://app.netlify.com/sites/optimistic-perlman-163196/deploys/5b10e5cdb3127429bf8a5d5d

I have tried all approach for solving this

1. Add featured_image to every frontmatter.
2. Remove the featured_image query from graphql.
3. Remove the gatsby-remark-images plugin.

But nothing seems to work, except for actually removing the images and the sharp plugin.

Any help in finding the issue is very appreciated.

Purism

Answer 1

It turns out I actually had a missing image file.

I am using gatsby-plugin-manifest and the image path I have put there is src/img/ninja.png, but it should have been src/images/ninja.png. I changed the directory name before and totally forgot to refactor it for the config file. I have corrected and it is working just fine.

So the bottom line is, when this error is happening

1. Look for all image files. Especially within gatsby-config.js file.
2. Check the output directory and see if it actually contains the "sharp"ed images.

The debugging path I took was to disable images one by one within the markdown files. But since it didn't solve the problem, I started looking elsewhere and then the gatsby-config.js came into notice. Totally my fault.

Purism

Thanks for giving all of that info! Helped me a lot! – Lugo

Answer 2

In case you are deploying via netlify, setting this environment variable worked for me.

SHARP_IGNORE_GLOBAL_LIBVIPS=true

Lathy

Answer 3

For me I had the correct image and this issue was resolved by:

rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install

source: https://github.com/gatsbyjs/gatsby/issues/21515#issuecomment-588416624

Matlock

Answer 4

Just add this to your package.json

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

Aten