Gatsby

Question

我有一个 Gatsby 网站，已经运行顺利上线 3 个月了。从 7 月 24 日星期五开始，我开始收到以下结果，用户只能看到空白屏幕。

    
    This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
        at h (gatsby-browser-entry.js:77)
        at O9Ll.t.default (buybike.js:52)
        at Ki (react-dom.production.min.js:153)
        at Fa (react-dom.production.min.js:175)
        at vo (react-dom.production.min.js:263)
        at cu (react-dom.production.min.js:246)
        at ou (react-dom.production.min.js:246)
        at Zo (react-dom.production.min.js:239)
        at react-dom.production.min.js:123
        at scheduler.production.min.js:19

这是我的 package.json

    "@reach/dialog": "^0.10.1",
    "@reach/tabs": "^0.10.1",
    "@reach/visually-hidden": "^0.10.1",
    "@stripe/stripe-js": "^1.4.0",
    "bootstrap": "^4.4.1",
    "dotenv": "^8.2.0",
    "gatsby": "^2.23.18",
    "gatsby-background-image": "^1.1.1",
    "gatsby-image": "^2.3.1",
    "gatsby-plugin-create-client-paths": "^2.2.1",
    "gatsby-plugin-manifest": "^2.3.3",
    "gatsby-plugin-netlify-identity": "0.0.3",
    "gatsby-plugin-offline": "^3.1.2",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
    "gatsby-plugin-react-helmet": "^3.2.1",
    "gatsby-plugin-robots-txt": "^1.5.1",
    "gatsby-plugin-sharp": "^2.5.3",
    "gatsby-plugin-sitemap": "^2.4.3",
    "gatsby-plugin-transition-link": "^1.18.0",
    "gatsby-remark-responsive-iframe": "^2.3.3",
    "gatsby-source-contentful": "^2.2.7",
    "gatsby-source-filesystem": "^2.2.2",
    "gatsby-source-stripe": "^3.0.7",
    "gatsby-transformer-remark": "^2.7.3",
    "gatsby-transformer-sharp": "^2.4.3",
    "gsap": "^3.2.6",
    "netlify": "^4.1.5",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.10.0",
    "react-netlify-identity-widget": "^0.2.7",
    "react-spring": "^8.0.27",
    "redux": "^4.0.5",
    "styled-components": "^5.1.0",
    "video-react": "^0.14.1"
  },

我的网站托管在 Netlify 上，我使用 Contentful 作为我的 CMS。可以在此处找到该站点 https://revelwell.com.au/ - 初始页面加载但如果您单击任何链接以离开该页面，则会发生错误。如果你点击刷新页面加载完美。

非常感谢任何帮助。谢谢詹姆斯

Answer 1

到目前为止你尝试了什么？由于 @ksav pointed out, in this GitHub thread 有多种方法可以解决类似问题：

删除 node_modules、.cache 并重新安装
删除 node_modules，.cache 将 Gatsby 修复到 v2.23.3/升级到 ^2.26.1，错误已修复并重新安装

这似乎与无法在全新安装中重现的 loading staticQuery bug 有关。最后的试用是去掉你的package-lock/yarn-lock.json重新生成

Answer 2

刚刚对 gatsby 项目进行了修复 (github.com/gatsbyjs/gatsby/pull/26077/)

现在可以在版本 2.24.13

上使用

如果您的 package.json 是："gatsby": "^2.23.18" 您只需要删除您的 yarn.lock 并执行 yarn install 以获取最新版本（您可以通过以下方式检查您的 gatsby 版本做 yarn list gatsby)

这应该可以解决您的问题（我的问题已解决！）。

Answer 3

我们的问题是由于导入错误造成的。我们有一个文件夹设置，其中我们在页面中有一个子文件夹：

-pages
 -about-us
  -index
  -references
  -employees

在作为 about-us 的第一个子页面的索引页面中，我们确实导入了这样的组件：import Index from '../../components/AboutUs'; 这在开发中有效，但在生产中我们需要将索引添加到 import Index from '../../components/AboutUs/Index';

只是想指出这一点，因为 Gatsby 可以创建一条在生产或开发模式下不可读的路径，这会导致静态查询问题。

Answer 4

我的解决方案基于以下阅读：

#26099

解决方法： yarn add -D babel-plugin-remove-graphql-queries

    # .storybook/main.js
        config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [['react-app', { flow: false, typescript: true }]],
        plugins: [
          require.resolve('@babel/plugin-proposal-class-properties'),
          // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
          require.resolve('babel-plugin-remove-graphql-queries'),
        ],
      },
    });
    config.resolve.extensions.push('.ts', '.tsx');

    # package.json
    "storybook:static-query": "yarn clean && yarn build && cp -r ./public/page-data/sq/d ./public/static",
    "storybook": "yarn storybook:static-query && NODE_ENV=test start-storybook -p 6006  --no-dll -s public",

脚本“故事书：static-query”的原因感谢 mohsenkhanpour。但简而言之，“babel-plugin-remove-graphql-queries”在 /static/d 上查找查询，因此我们只是将其从 Gatsby 放置它们的位置移开。

相关包版本：

    "gatsby": "^2.24.66",
    "storybook": "^6.0.28",
    "babel-loader": "^8.1.0",
    "babel-plugin-remove-graphql-queries": "^2.9.20",

Answer 5

尝试全局安装

npm install -g gatsby-cli

Answer 6

有时清理缓存可以解决突发的 GraphQL 错误：

# Run `npm install -g gatsby-cli` if you haven't installed Gatsby CLI
gatsby clean

Documentation on gatsby clean

Answer 7

只需将您正在使用 useStaticQuery 挂钩的组件的文件名大写即可。

示例：header.js -> Header.js
然后清除Gatsby缓存并重启服务器。
这应该可以解决问题。

Answer 8

运行在按照教程进行操作时遇到“无法获取此 StaticQuery 的结果”错误，花了大约 30 分钟才找出问题。

我多次尝试“gatsby clean”并删除并重新安装我的 node_modules 目录，但都没有成功。

我已将查询提取到 useSiteMetadata 挂钩，最初在创建“useSiteMetaData.js”文件时不小心将“D”大写，这导致它被导入为“../hooks/useSiteMetaData .js" 在我的导航组件中。我已将文件名更改为“useSiteMetadata.js”，但该导入仍在使用首字母大写的“D”外壳。

我将导入路径更正为“../hooks/useSiteMetadata.js”和运行“gatsby clean”，错误消失了。

作为额外说明，我还删除了 localhost:8000 中的 cookie - 我之前尝试过几次都没有效果，但我在修复导入路径大小写之前就这样做了，所以想注意一下以防万一。

Gatsby - 无法获取此 StaticQuery 的结果

Gatsby - The result of this StaticQuery could not be fetched

contentful

netlify