GitHub Actions fail with Gatsby Error: Input file contains unsupported image format

Question

I use Gatsby and NetlifyCMS for my website and currently get the following error message at running Workflow in GitHub Actions:

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

Error: Input file contains unsupported image format

It is very strange that the error does not occur with gatsby develop and gatsby build on my local system

My plugins array looks as follows:

plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/static/img`,
        name: "uploads",
      },
    },
    `gatsby-plugin-smoothscroll`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-twitter`,
    {
      resolve: "gatsby-plugin-netlify-cms",
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
        htmlFavicon: `src/images/favicon.png`,
      },
    },
    `gatsby-plugin-no-index`,
    `gatsby-plugin-transition-link`,
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/postings`,
        name: "postings",
      },
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /svg/,
        },
      },
    },
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-relative-images",
            options: {
              name: "uploads",
            },
          },
          {
            resolve: "gatsby-remark-images",
            options: {
              staticFolderName: "static",
              maxWidth: 768,
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        // Available options and their defaults:
        base64Width: 20,
        forceBase64Format: `jpg`, // valid formats: png,jpg,webp
        useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
        stripMetadata: true,
        defaultQuality: 50,
        failOnError: true,
      },
    },
    `gatsby-plugin-postcss`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/favicon.png`, // This path is relative to the root of the site.
      },
    },
  ],

And this is my query where I access a thumbnail with childImageSharp

const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark(
        filter: { frontmatter: { templateKey: { eq: "blog" } } }
      ) {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              title
              language
              templateKey
              description
              author
              thumbnail {
                childImageSharp {
                  fluid(maxWidth: 240, maxHeight: 140, quality: 100) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      }
    }
  `);

I do not know what the reason for this is. I have already tried to update several packages.

This is my package.json

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "@brainhubeu/react-carousel": "^1.19.26",
    "@tailwindcss/ui": "^0.6.2",
    "axios": "^0.21.0",
    "formik": "^2.2.3",
    "gatsby": "2.28.00",
    "gatsby-image": "^2.4.17",
    "gatsby-plugin-manifest": "^2.7.0",
    "gatsby-plugin-matomo": "^0.8.3",
    "gatsby-plugin-netlify-cms": "^4.4.0",
    "gatsby-plugin-no-index": "^1.0.1",
    "gatsby-plugin-offline": "^3.2.27",
    "gatsby-plugin-postcss": "^2.3.12",
    "gatsby-plugin-react-helmet": "^3.3.14",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-sharp": "^2.10.0",
    "gatsby-plugin-smoothscroll": "^1.2.0",
    "gatsby-plugin-transition-link": "^1.20.5",
    "gatsby-plugin-twitter": "^2.4.0",
    "gatsby-plugin-typography": "^2.5.11",
    "gatsby-remark-images": "^3.7.0",
    "gatsby-remark-relative-images": "^2.0.2",
    "gatsby-source-filesystem": "^2.3.28",
    "gatsby-transformer-remark": "^2.11.0",
    "gatsby-transformer-sharp": "^2.5.14",
    "i18next": "^19.8.3",
    "lodash": "^4.17.20",
    "netlify-cms-app": "^2.13.3",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0",
    "react-i18next": "^11.7.3",
    "react-media": "^2.0.0-rc.1",
    "react-particles-js": "^3.3.0",
    "react-select": "^3.1.1",
    "react-slick": "^0.27.12",
    "react-spring": "^8.0.27",
    "react-transition-group": "1.x",
    "react-typography": "^0.16.19",
    "sharp": "^0.26.3",
    "slick-carousel": "^1.8.1",
    "tsparticles": "^1.18.2",
    "typography": "^0.16.19",
    "yup": "^0.29.3"
  },
  "devDependencies": {
    "env-cmd": "^10.1.0",
    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.17",
    "prettier": "2.1.1",
    "tailwindcss": "^1.8.10"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "env-cmd -f .env.local gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Match

Does your src/images/favicon.png even exist? – Larynx

@FerranBuireu I have checked the path again. The path is correct and the image exists in this form. – Match

Answer 1

The issue seems to be related to the favicon path, ensure that the path is correct and try changing it to other dummy image.

If the paths are correct this issue is likely due to an outdated dev-dependency (@babel/helper-compilation-targets) or, according to this GitHub thread it could be also due to an invalid version of libvips dependency. In both cases you can try the same solution:

Remove your lock file (package-lock.json or yarn-lock.json), and your node_modules folder and reinstall your dependencies with yarn install or npm install. If the issue persists, try:

rm -rf node_modules &&
SHARP_IGNORE_GLOBAL_LIBVIPS=true yarn

Larynx

Since the error message only occurs in the build process, this will unfortunately not help. The package.json file will remain the same and the build process will report an error again. For me locally this still works with gatsby develop and build. It is really strange why this error occurs. I have removed all blog posts and checked if the paths to the images are correct. – Match

Of course, my guess is the issue relies on mismatching versions of Node, or any specific dependency between your local and Netlify. That's why I tried to upgrade them locally to reproduce the issue locally. The build process takes the installed dependencies to work and do stuff, so that's my guess. Try checking versions of the node between your local and Netlify. The fact that is building locally should not be taken as absolute truth. It builds under your conditions, not in Netlify's environment, that's why I'm pointing that direction. – Larynx

thank you for the hints! I will check the node version between my local and Netlifys one. However, I have now managed to make the build process work. I have commented out the plugin gatsby-plugin-manifest in gatsby-config.js. Now the build process works. It is up to gatsby-plugin-manifest. It is probably not configured correctly, because the code is still from the starter template. – Match

Yes, of course, my first guess was that the path of the gatsby-plugin-manifest was wrong since the error is pointing out this but, it seems that it is not able to get the favicon but you said that it was working so, making reading on some threads the issue I changed the direction. Try changing the image to another dummy one. – Larynx

Replacing the old favicon.png with a new image (& new name) did work ;) – Match

Answer 2

Had similar failure on github workflow. Error was

success Build manifest and related icons - 0.002s
error "gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:

Input file contains unsupported image format


  Error:Input file contains unsupported image format

not finished onPostBootstrap - 0.021s
Error: The process '/usr/local/bin/npm' failed with exit code 1

5 steps:

• Delete node_modules
• Delete package-lock.json
• npm cache clean --force
• npm rebuild --verbose sharp
• npm install

Issue seems to be at the babel packages being cached as @Ferren already indicated

Murrey