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

[thitemple]

Summary

I just started developing a new blog and I have the following issue:

I have no idea how to debug? In dev mode is working, this only happens when I run build. Is there a way to know which file is it talking about? I tried running with --verbose but that doesn't help.

Relevant information

I'm running the latest beta from v2

Environment (if relevant)

Windows 10

File contents (if changed)

gatsby-config.js:
```const config = require("./config/SiteConfig");

const pathPrefix = config.pathPrefix === "/" ? "" : config.pathPrefix;

module.exports = {
pathPrefix: config.pathPrefix,
siteMetadata: {
title: "Blog",
siteUrl: config.siteUrl + pathPrefix,
buildTime: new Date(Date.now()).toLocaleString()
},
plugins: [
"gatsby-plugin-feed",
"gatsby-plugin-react-helmet",
"gatsby-plugin-styled-components",
{
resolve: "gatsby-source-filesystem",
options: {
name: "post",
path: ${__dirname}/blog
}
},
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "gatsby-remark-external-links",
options: {
target: "_blank",
rel: "nofollow noopener noreferrer"
}
},
"gatsby-remark-prismjs",
"gatsby-remark-autolink-headers",
{
resolve: gatsby-remark-responsive-image,
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 590
}
}
]
}
},
{
resolve: "gatsby-plugin-typography",
options: {
pathToConfigModule: "src/utils/typography.js"
}
},
"gatsby-plugin-catch-links",
"gatsby-plugin-sitemap",
"gatsby-plugin-lodash",
{
resolve: "gatsby-plugin-manifest",
options: {
name: config.siteTitle,
short_name: config.siteTitleAlt,
description: config.siteDescription,
start_url: config.pathPrefix,
background_color: config.backgroundColor,
theme_color: config.themeColor,
display: "fullscreen",
icon: "src/favicon.ico"
}
},
"gatsby-plugin-offline",
{
resolve: "gatsby-plugin-google-analytics",
options: {
trackingId: "UA-41090209-2",
head: false,
anonymize: true,
respectDNT: true
}
}
]
};

`package.json`: N/A <!-- Please use a code block or just leave it as is if wasn't changed -->
`gatsby-node.js`: 

const path = require("path");
const _ = require("lodash");

exports.onCreateNode = ({ node, actions }) => {
const { createNodeField } = actions;
let slug;
if (node.internal.type === "MarkdownRemark") {
if (
Object.prototype.hasOwnProperty.call(node, "frontmatter") &&
Object.prototype.hasOwnProperty.call(node.frontmatter, "slug")
) {
slug = /${_.kebabCase(node.frontmatter.slug)};
}
if (
Object.prototype.hasOwnProperty.call(node, "frontmatter") &&
Object.prototype.hasOwnProperty.call(node.frontmatter, "title")
) {
slug = /${_.kebabCase(node.frontmatter.title)};
}
createNodeField({ node, name: "slug", value: slug });
}
};

exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions;

return new Promise((resolve, reject) => {
const postPage = path.resolve("src/templates/post.js");
const categoryPage = path.resolve("src/templates/category.js");
resolve(
graphql( { posts: allMarkdownRemark { edges { node { fields { slug } frontmatter { title category path } } } } } ).then(result => {
if (result.errors) {
console.log(result.errors);
reject(result.errors);
}

    const posts = result.data.posts.edges;

    posts.forEach((edge, index) => {
      const next = index === 0 ? null : posts[index - 1].node;
      const prev =
        index === posts.length - 1 ? null : posts[index + 1].node;

      createPage({
        path: edge.node.frontmatter.path,
        component: postPage,
        context: {
          slug: edge.node.fields.slug,
          prev,
          next
        }
      });
    });

    let categories = [];

    _.each(posts, edge => {
      if (_.get(edge, "node.frontmatter.category")) {
        categories = categories.concat(edge.node.frontmatter.category);
      }
    });

    categories = _.uniq(categories);

    categories.forEach(category => {
      createPage({
        path: `/categories/${_.kebabCase(category)}`,
        component: categoryPage,
        context: {
          category
        }
      });
    });
  })
);

});
};
`` gatsby-browser.js: N/A <!-- Please use a code block or just leave it as is if wasn't changed --> gatsby-ssr.js`: N/A

[pieh]

This does look a lot like https://github.com/gatsbyjs/gatsby/issues/5638 - can you try commenting out gatsby-plugin-manifest from your gatsby-config, try build and see if this happens again?

[pieh]

Also - what is version of your gatsby-plugin-manifest?

[pieh]

Sorry for comment spam :) Just noticed You use icon: "src/favicon.ico" and .ico isn't supported by sharp which is used to generate different sizes of icons - try using .png.

And we probably do need better validation (not only check if file exists but also if it's of supported format) + some error handling to at least notify where error was thrown

[thitemple]

That was it, favicon.ico. Thanks!

[MrUltimate]

I'm suddenly getting this error today, out of the blue. Using a normal png file. Did something change in Gatsby recent that might be breaking this?

[jackieluc]

@MrUltimate This happened to me recently as well (after I was updating package dependencies). I fixed it with the following steps:

1. rm -rf node_modules/
2. rm package-lock.json
3. Update any of the following packages (ie. npm install gatsby-plugin-sharp) that you are using in your project. The list of plugins depend on the sharp package and was provided by the troubleshooting section of the gatsby-plugin-manifest docs.

• gatsby-plugin-sharp
• gatsby-plugin-manifest
• gatsby-remark-images-contentful
• gatsby-source-contentful
• gatsby-transformer-sharp
• gatsby-transformer-sqip

1. Lastly, install the rest of your dependencies again with npm install

[MrUltimate]

Thanks, @jackieluc. I was actually able to fix it by simple running npm upgrade on the project.

[tplive]

@MrUltimate thanks! I was able to fix the problem by using npm upgrade too. Strangely, it didn't surface during local build, but was discovered in the Netlify build pipeline.