“没有在gatsby-config.js中正确设置。请确保将其添加到plugins数组中。”

Question

最令人沮丧的是，我在早些时候就把它弄坏了，但是我用gatsby-plugin-sharp和gatsby-plugin-图片在我的主页上添加了一张照片，然后看到了这个错误：

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

我不知道为什么..。我试过删除node_modules，package_lock.json，重新安装.除此之外，我还可以看出插件肯定在我的数组中，如果我在插件中添加未解决的选项，当插件加载时，它会问我关于它们的问题。

我不确定我是否需要用另一种方式订购它们，并且因为我没有备份而自责。

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

在插件/主题的gatsby-plugin-sharp dir中安装本地node_modules可能是造成此问题的原因。

确保gatsby-plugin-sharp是由所有插件从根node_modules加载的。查找每个已安装插件的node_modules中的gatsby-plugin-sharp文件夹。如果您找到一个，您应该需要配置该包的gatsby-plugin-sharp版本，以匹配您在网站上使用的包。不要忘记从插件和盖茨比安装中删除package-lock.json和node_modules，然后再次运行npm install。您可以尝试将安装的gatsby-plugin-sharp版本与插件版本相匹配。

我不确定这是否是你的情况，但我在这里张贴它作为其他人的参考。在您的package.json中，gatsby-plugin-sharp的gatsby-theme-purist版本是^2.14.4。您的包需要^3.8.0，也许这个主题导致了您的问题。

Answer 2

我通过乱搞版本来解决这个问题。老实说，我和这件事斗争了好几个小时，所以我完全忘记了我做了什么。尽管如此，我现在确实让它与以下组合一起工作：

"@babel/preset-env": "7.9.0",
        "@chakra-ui/core": "^0.6.1",
        "@emotion/core": "^10.0.28",
        "@emotion/styled": "^10.0.27",
        "emotion-theming": "^10.0.27",
        "gatsby": "^4.4.0",
        "gatsby-image": "^2.3.1",
        "gatsby-plugin-chakra-ui": "^0.1.4",
        "gatsby-plugin-google-gtag": "^4.4.0",
        "gatsby-plugin-react-helmet": "^3.2.0",
        "gatsby-plugin-sharp": "^4.4.0",
        "gatsby-source-contentful": "^2.2.3",
        "gatsby-source-filesystem": "^2.2.2",
        "gatsby-transformer-sharp": "^2.4.2",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-helmet": "^5.2.1",
        "react-icons": "^3.9.0"

在Netlify上，我使用了环境变量NODE_VERSION 14.17.5。

对不起，我做的事情不能说得更具体。

编辑：，您可能想试试transformer-sharp: ^4.4.0 instead。我想我在上面搞砸了。