[gatsby-plugin-manifest] build fails with cryptic error if icon specified in config doesn't exist

[swashata]

Description

I have added gatsby-plugin-remark and gatsby-transformer-remark to optimize some images through frontmatter. The setup is really simple. Say I have a md file.

---
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
---

...

In gatsby-config.js I have

// ....
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
// ...

And I am querying the image like this

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
      }
    }
  }
`;

When doing so, gatsby develop runs fine and even shows the images. But when I run gatsby build it seems to work but in the end, it throws error

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

The funny thing is, if I just ignore the error and serve with gatsby serve it seems to work perfectly fine. I don't know why the errors are happening.

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.

Steps to reproduce

1. Clone this repo https://github.com/swashata/swas.io
2. Run yarn build. It will throw the error.
3. Run yarn develop, it will just work.

Expected result

It should have worked?!

Actual result

It failed.

https://app.netlify.com/sites/optimistic-perlman-163196/deploys/5b103039dd6a543fe69ff5d4

PS: I have actually tried removing that hello-world-banner.jpg image. Then it just fails on another image. I kept on removing until there's no image left. Then of course it worked.

For now, I have set netlify build command yarn build || true which just ignores the error and deploys anyway. You can it working good just here https://swas.io

Environment

• Gatsby version (npm list gatsby): gatsby@1.9.215
• gatsby-cli version (gatsby --version): 1.1.52
• Node.js version: v9.11.1
• Operating System: macOS 10.13.4 (17E202) (High Sierra)

File contents (if changed)

gatsby-config.js: https://github.com/swashata/swas.io/blob/master/gatsby-config.js?ts=2
package.json: https://github.com/swashata/swas.io/blob/master/package.json
gatsby-node.js: https://github.com/swashata/swas.io/blob/master/gatsby-node.js?ts=2

[swashata]

Stackoverflow reference https://stackoverflow.com/questions/50637331/gatsby-build-always-throwing-input-file-is-missing-or-of-an-unsupported-image-fo

[swashata]

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.

Is it possible to add some better error message with atleast the filename so that we could know from where the issue is coming?

[pieh]

Would you like to create PR for it? You would have to check for example here https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/src/gatsby-node.js#L52-L60 and reject promise if source icon is defined in config, but doesn't exists

[swashata]

Yes, thank you. I will definitely take a look and will try my best. I have spent two days figuring it out (feeling really stupid now) so an error message can really help someone.

I have read this https://www.gatsbyjs.org/docs/how-to-contribute/#contributing-to-the-repo

Any quick pointer on how to setup the development and work specifically on this and create a test case which will fail? I do not see any tests being done there, so perhaps I can setup something like jest? Is it okay?

[pieh]

For local dev everything should be mentioned in docs you linked. gatsby-dev (also mentioned there) will take care of copying changes you do locally to packages in cloned monorepo to your test site.

Some plugins do use jest (for example https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/src/__tests__) and travis will run those tests as part of pull request checks, so if You are up for it - defenitely give it a go.

[swashata]

Great I will give it a go then.

[swashata]

Just chimed in to say that I will be doing this today.