gatsby - "Gatsby-plugin-sharp wasn' t 在 gatsby-config.js 中正确设置。确保将它添加到插件数组中。”

Question

最令人沮丧的部分是我之前有这个工作然后不知何故破坏了它，但我正在使用 gatsby-plugin-sharp 和 gatsby-plugin-image 将照片添加到我的主页并看到这个错误:

Gatsby-plugin-sharp 没有在 gatsby-config.js 中正确设置。确保将它添加到插件数组中。

我不知道为什么...我试过删除 node_modules、package_lock.json，重新安装...除此之外，我还可以看出插件肯定在我的数组中，如果我向插件添加选项- sharp 是 Unresolved ，它会在插件加载时询问我有关它们的信息。

我不确定我是否需要以不同的方式订购它们，并且因为没有备份而踢自己。

gatsby-config.js:

module.exports = {
  siteMetadata: {
    siteUrl: 'myinfo-redacted',
    name: "myinfo-redacted",
    defaultTitle: "Bmyinfo-redacted",
    titleTemplate: "%s • myinfo-redacted",
    description: "myinfo-redacted",
    author: "myinfo-redacted",
    hero: {
      heading: "myinfo-redacted",
      subHeading: "myinfo-redacted",
    },
    social: [
      {
        name: "twitter",
        url: "myinfo-redacted",
      },
      {
        name: "linkedin",
        url: "myinfo-redacted",
      },
      {
        name: "devto",
        url: "myinfo-redacted",
      },
      {
        name: "youtube",
        url: "myinfo-redacted",
      },
    ],
  },
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/gatsby-theme-purist/images`
      },
    },
    {
      resolve: 'gatsby-theme-purist',
      options: {
        contentBase: 'content',
        basePath: '/',
        featuredArticleLimit: 2,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Bryan Barrows`,
        short_name: `Bryan Barrows`,
        start_url: `/`,
        icon: 'static/favicon.png'
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdown-pages`,
        path: `${__dirname}/content/articles`,
        ignore: [`**/drafts`]
      },
    },
    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allMdx } }) => {
              return allMdx.edges.map(edge => {
                return Object.assign({}, edge.node.frontmatter, {
                  description: edge.node.frontmatter.description,
                  date: edge.node.frontmatter.date,
                  author: site.siteMetadata.name,
                  url: site.siteMetadata.siteUrl + edge.node.fields.slug,
                  guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
                  custom_elements: [{ "content:encoded": edge.node.html }]
                });
              });
            },
            query: `
              {
                allMdx(
                  sort: { order: DESC, fields: [frontmatter___date] }, filter: {frontmatter: { draft: {eq: false} }}
                ) {
                  edges {
                    node {
                      excerpt
                      html
                      fields { slug }
                      frontmatter {
                        title
                        date
                        description
                        author
                      }
                    }
                  }
                }
              }
            `,
            output: "/rss.xml",
            title: "Bryan Barrows RSS Feed",
            // optional configuration to insert feed reference in pages:
            // if `string` is used, it will be used to create RegExp and then test if pathname of
            // current page satisfied this regular expression;
            // if not provided or `undefined`, all pages will have feed reference inserted
            match: "^/articles/"
          }
        ]
      }
    },
    {
      resolve: "gatsby-plugin-social9-socialshare",
      options: {
        content:  "ca24ce819d944595a0a4c3f53125d1a8",
        async: true,
        defer: true
      }
    },
    {
      resolve: 'gatsby-plugin-offline',
      options: {}
    },
  ],
}

package.json:

{
  "name": "gatsby-starter-purist",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "",
  "author": "Sebastian Ojeda <hello@sebastianojeda.com> (@sebsojeda)",
  "license": "0BSD",
  "private": true,
  "scripts": {
    "start": "yarn dev",
    "dev": "GATSBY_GRAPHQL_IDE=playground gatsby develop",
    "build": "gatsby build",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "gatsby": "^4.0.0-next",
    "gatsby-image": "^3.11.0",
    "gatsby-plugin-feed": "^4.4.0",
    "gatsby-plugin-image": "^2.4.0",
    "gatsby-plugin-manifest": "^4.3.0",
    "gatsby-plugin-mdx": "^3.4.0",
    "gatsby-plugin-offline": "^5.3.0",
    "gatsby-plugin-sharp": "^3.8.0",
    "gatsby-plugin-social9-socialshare": "^1.0.5",
    "gatsby-remark-images": "^6.4.0",
    "gatsby-source-filesystem": "^4.4.0",
    "gatsby-theme-purist": "^1.3.0",
    "gatsby-transformer-remark": "^5.3.0",
    "gatsby-transformer-sharp": "^4.4.0",
    "markdown-to-jsx": "^7.1.5",
    "react": "^16.14.0",
    "react-dom": "^16.14.0"
  }
}

今天早些时候它按预期工作的事实让我相信它应该是可能的，并且 gatsby-config.js 有一些奇怪的东西 - 特别是因为错误配置的错误或它从插件数组中丢失。

Answer 1

从 Netlify 构建日志中得到了相同的错误消息。能够通过更新到最新版本来解决:npm install gatsby-plugin-sharp@latest 或 yarn add gatsby-plugin-sharp@latest。

有关更多上下文，这也是在从 Gatsby v3 更新到 v4 之后。以下是受影响依赖项的之前(不工作)和之后(工作):

不工作:

 "gatsby": "^4.14.1"  
 "gatsby-plugin-sharp": "^3.5.0"

工作:

"gatsby": "^4.14.1"
"gatsby-plugin-sharp": "^4.15.0"