GitHub Actions 失败并出现 Gatsby 错误:输入文件包含不受支持的图像格式

use*_*135 6 gatsby netlify github-actions gatsby-image gatsby-plugin

我的网站使用 Gatsby 和 NetlifyCMS,目前在GitHub Actions运行工作流程时收到以下错误消息:

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

Error: Input file contains unsupported image format
Run Code Online (Sandbox Code Playgroud)

很奇怪的是,在我的本地系统上使用gatsbydevelopgatsbybuild并没有出现该错误

我的插件数组如下所示:

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.
      },
    },
  ],
Run Code Online (Sandbox Code Playgroud)

这是我的查询,我使用 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
                  }
                }
              }
            }
          }
        }
      }
    }
  `);
Run Code Online (Sandbox Code Playgroud)

我不知道这是什么原因。我已经尝试更新几个软件包。

这是我的 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"
  }
}
Run Code Online (Sandbox Code Playgroud)

Fer*_*reu 5

该问题似乎与图标路径有关,请确保路径正确并尝试将其更改为其他虚拟图像。

如果路径正确,此问题可能是由于过时的开发依赖项( @babel/helper-compilation-targets) 造成的,或者根据此 GitHub 线程,也可能是由于libvips依赖项版本无效造成的。在这两种情况下,您可以尝试相同的解决方案:

删除锁定文件(package-lock.jsonyarn-lock.json)和文件夹,然后使用或node_modules重新安装依赖项。如果问题仍然存在,请尝试:yarn installnpm install

rm -rf node_modules &&
SHARP_IGNORE_GLOBAL_LIBVIPS=true yarn
Run Code Online (Sandbox Code Playgroud)