“Gatsby-plugin-sharp 在 gatsby-config.js 中未正确设置。请确保将其添加到插件数组中。”

Question

最令人沮丧的是，我之前就已经完成了这项工作，然后以某种方式破坏了它，但我正在使用 gatsby-plugin-sharp 和 gatsby-plugin-image 将照片添加到我的主页并看到此错误：

\n

Gatsby-plugin-sharp wasn't setup correctly in gatsby-config.js. Make sure you add it to the plugins array.

\n

我不知道为什么......我尝试删除node_modules，package_lock.json，重新安装......除此之外，我还可以说该插件肯定在我的数组中，如果我向plugin-sharp添加选项未解决，当插件加载时它会询问我有关它们的信息。

\n

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

\n

gatsby-config.js：

\n

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

\n

包.json：

\n

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

\n

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

\n

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"