我的网站使用Gatsby和NetlifyCMS，当前在GitHub Actions中运行工作流时收到以下错误消息：
error "gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:
Error: Input file contains unsupported image format
非常奇怪的是，错误没有发生，gatsby-development和gatsby-build在我的本地系统上
我的插件数组如下所示：
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.
},
},
],
这是我使用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
}
}
}
}
}
}
}
}
`);
我不知道这是什么原因。我已经尝试更新了几个软件包。
这是我的包.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"
}
}
问题似乎与favicon路径有关，请确保路径正确，并尝试将其更改为其他伪图像。
如果路径正确，则此问题可能是由于过时的开发依赖项(@babel/helper-compilation-targets(造成的，或者根据此GitHub线程，也可能是由于libvips依赖项的无效版本造成的。在这两种情况下，您都可以尝试相同的解决方案：
删除锁定文件(package-lock.json或yarn-lock.json(和node_modules文件夹，然后使用yarn install或npm install重新安装依赖关系。如果问题仍然存在，请尝试：
rm -rf node_modules &&
SHARP_IGNORE_GLOBAL_LIBVIPS=true yarn
在github工作流中也出现了类似的故障。错误为
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个步骤：
- 删除node_modules
- 删除package-lock.json
- npm缓存清理--强制
- npm重建-verbose sharp
- npm安装
问题似乎出现在缓存的babel包上，因为@Ferren已经指示