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 <mathews.kyle@gmail.com>",
"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"
}
}
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