4

我将 Gatsby 和 NetlifyCMS 用于我的网站,目前在GitHub Actions中运行 Workflow时收到以下错误消息:

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

Error: Input file contains unsupported image format

很奇怪,我的本地系统上的gatsby developgatsby 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
                  }
                }
              }
            }
          }
        }
      }
    }
  `);

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

这是我的 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"
  }
}
4

2 回答 2

3

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

如果路径正确,则此问题可能是由于过时的开发依赖项(在这两种情况下,您都可以尝试相同的解决方案:@babel/helper-compilation-targetslibvips

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

rm -rf node_modules &&
SHARP_IGNORE_GLOBAL_LIBVIPS=true yarn
于 2020-12-07T10:48:06.853 回答
1

在 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 缓存清理 --force
  • npm 重建 --verbose 尖锐
  • npm 安装

问题似乎出在缓存的 babel 包上,正如@Ferren 已经指出的那样

于 2022-01-10T21:05:00.050 回答