加载 (StaticQuery) - Gatsby 站点不会在 Netlify 生产中加载，但在开发中运行良好

如何解决加载 (StaticQuery) - Gatsby 站点不会在 Netlify 生产中加载，但在开发中运行良好

这件事让我难受。我正在使用 Gatsby、Sanity 和 Netlify，开发中的一切都按预期工作。现在，当我在 Netlify 上加载我的网站（没有构建错误）时，我看到的只是一个带有“加载（静态查询）”的白屏。没有任何错误可供我调试。我已经看到了几个关于此的问题，但它们在 github 上没有得到解答，或者解决方案对我不起作用。

我的组件中只有两个使用静态查询，布局组件（它包装了所有内容，因此网站在生产中根本不加载）和 SEO 组件，它们都来自我使用的启动器并且几乎没有受到影响。

我正在使用此 Sanity starter 的修改版本：https://github.com/sanity-io/example-company-website-gatsby-sanity-combo

我已经更新了所有软件包以消除所有 npm 漏洞（我还没有在使用相同 starter 的其他几个项目中完成此操作）。因此，我已经更新到 Gatsby 3.2.1，而不是从初学者开始的 Gatsby 2.18.7。同样，在开发中没有问题，只有在生产构建中。我已经将那些基于相同 starter 的其他项目和较旧的 Gatsby 版本部署到 Netlify 没有这个问题，所以我预计这个问题与版本的变化有关。

我将包含我的 Package.json 以及布局和 SEO 组件文件，这是仅有的两个使用 StaticQueries 的文件。

Package.json

        "scripts": {
        "build": "gatsby build","deploy": "npm run now-deploy","develop": "gatsby develop","empty-cache": "gatsby clean","lint": "eslint .","now-build": "npm run build","workers-build": "npm run build","workers-start": "npm run build && wrangler preview --watch","workers-deploy": "npm run build && wrangler publish","now-dev": "npm run build","start": "npm run develop","format": "prettier-eslint --write \"**/*.js\" \"!.cache/**\" \"!node_modules/**\" \"!public/**\"","test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
      },"dependencies": {
    "@cloudflare/wrangler": "^1.15.0","@fontsource/montserrat": "^4.2.2","@fontsource/raleway": "^4.2.2","@sanity/block-content-to-react": "^2.0.7","@sanity/client": "^2.7.1","@sanity/image-url": "^0.140.22","date-fns": "^2.19.0","dotenv": "^8.2.0","gatsby": "^3.2.1","gatsby-plugin-anchor-links": "^1.2.1","gatsby-plugin-image": "^1.2.0","gatsby-plugin-manifest": "^3.2.0","gatsby-plugin-react-helmet": "^4.2.0","gatsby-source-sanity": "^7.0.2","get-youtube-id": "^1.0.1","postcss-import": "^14.0.1","postcss-preset-env": "^6.7.0","react": "^17.0.2","react-autosize-textarea": "^7.1.0","react-dom": "^17.0.2","react-helmet": "^6.1.0","react-hook-form": "^7.0.0","react-icons": "^4.2.0","react-script": "^2.0.5","react-tabs": "^3.2.1","react-youtube": "^7.13.1"
  },"devDependencies": {
    "eslint": "^7.23.0","eslint-config-standard": "^16.0.2","eslint-config-standard-react": "^11.0.1","eslint-plugin-import": "^2.22.1","eslint-plugin-node": "^11.1.0","eslint-plugin-promise": "^4.3.1","eslint-plugin-react": "^7.23.1","eslint-plugin-standard": "^5.0.0","gatsby-plugin-postcss": "^4.2.0","postcss": "^8.2.9","prettier-eslint-cli": "^5.0.1","prop-types": "^15.7.2"
  }
}

Layout.js

import { graphql,StaticQuery } from 'gatsby'
import React,{ useState } from 'react'
import Layout from '../components/layout'

function LayoutContainer (props) {
  const [showNav,setShowNav] = useState(false)
  function handleShowNav () {
    setShowNav(true)
  }
  function handleHideNav () {
    setShowNav(false)
  }
  return (
    <StaticQuery
      query = {graphql`
        query SiteInfoQuery {
          site: sanitySiteSettings(_id: { regex: "/(drafts.|)siteSettings/" }) {
            title
          }
      
          company: sanityCompanyInfo {
            phone
            email
            _rawDescription
            name
            linkedin
            instagram
            facebook
          }
        }
      `}
      render={data => {
        if (!data.site) {
          throw new Error(
            'Missing "Site settings". Open the studio at http://localhost:3333 and add "Site settings" data'
          )
        }
        if (!data.company) {
          throw new Error(
            'Missing "company info". Open the studio at http://localhost:3333 and add "company info" data'
          )
        }
        return (
          <Layout
            {...props}
            showNav={showNav}
            company={data.company}
            siteTitle={data.site.title}
            onHideNav={handleHideNav}
            onShowNav={handleShowNav}
          />
        )
      }}
    />
  )
}

export default LayoutContainer

SEO.js

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery,graphql } from 'gatsby'

function SEO ({ description,lang,meta,keywords = [],title }) {
  return (
    <StaticQuery
      query={graphql`
        query SEOQuery {
          site: sanitySiteSettings(_id: { regex: "/(drafts.|)siteSettings/" }) {
            title
            description
            keywords
            author
          }
        }
      `}
      render={data => {
        if (!data.site) {
          return
        }
        const metaDescription = description || data.site.description
        return (
          <Helmet
            htmlAttributes={{
              lang
            }}
            title={title}
            titleTemplate={title === data.site.title ? '%s' : `%s | ${data.site.title}`}
            meta={[
              {
                name: 'description',content: metaDescription
              },{
                property: 'og:title',content: title
              },{
                property: 'og:description',{
                property: 'og:type',content: 'website'
              },{
                name: 'twitter:card',content: 'summary'
              },{
                name: 'twitter:creator',content: data.site.author
              },{
                name: 'twitter:title',{
                name: 'twitter:description',content: metaDescription
              }
            ]
              .concat(
                keywords && keywords.length > 0
                  ? {
                    name: 'keywords',content: keywords.join(',')
                  }
                  : []
              )
              .concat(meta)}
          />
        )
      }}
    />
  )
}

SEO.defaultProps = {
  lang: 'en',meta: [],keywords: []
}

SEO.propTypes = {
  description: PropTypes.string,lang: PropTypes.string,meta: PropTypes.array,keywords: PropTypes.arrayOf(PropTypes.string),title: PropTypes.string.isRequired
}

export default SEO