我有一个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
这是我的包.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/-加载初始页面，但如果单击任何链接以离开页面，则会发生错误。如果你点击刷新页面加载非常好。
非常感谢您的帮助。非常感谢。James
刚刚修复了gatsby项目(github.com/gatsbyjs/gatsby/pull/26077/(
它现在可在22.413版本上使用
如果你的package.json是："gatsby": "^2.23.18"，你只需要删除你的码锁定并执行yarn install即可获得最新版本(你可以通过执行yarn list gatsby来检查你的盖茨比版本(
这应该能解决你的问题(我的问题解决了！(。
-
只需将使用useStaticQuery钩子的组件的文件名大写即可。
示例：header.js->Header.js
-
然后清除Gatsby缓存并重新启动服务器。
-
这应该可以解决问题。
有时清理缓存可以解决GraphQL的突然错误：
# Run `npm install -g gatsby-cli` if you haven't installed Gatsby CLI
gatsby clean
gatsby clean文档
到目前为止你尝试了什么？正如@ksav所指出的，在这个GitHub线程中，有几种方法可以解决类似的问题：
- 删除
node_modules、.cache并重新安装 - 删除
node_modules、.cache将Gatsby修复为v2.23.3/升级至修复错误的^2.26.1，然后重新安装
这似乎与一个无法在新安装中重现的加载staticQuery错误有关。最后的尝试是删除您的package-lock/yarn-lock.json并重新生成它。
我们的问题是由于进口中的一个错误造成的。我们有一个文件夹设置，在页面中有一个子文件夹：
-pages
-about-us
-index
-references
-employees
在关于我们的第一个子页面的索引页面中，我们确实导入了这样一个组件：import Index from '../../components/AboutUs';这在开发中有效，但在生产中我们需要将索引添加到import Index from '../../components/AboutUs/Index';
我只是想指出这一点，因为Gatsby可以创建一条在生产或开发模式中无法读取的路径，这会导致静态查询问题。
我的解决方案基于以下内容：
#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",
脚本的原因"；故事书：静态查询；感谢莫森汗普尔。但简而言之；babel插件移除graphql查询"在/static/d上查找查询，所以我们把它从盖茨比放置它们的位置移走了。
相关软件包版本：
"gatsby": "^2.24.66",
"storybook": "^6.0.28",
"babel-loader": "^8.1.0",
"babel-plugin-remove-graphql-queries": "^2.9.20",
跑进"无法获取此StaticQuery的结果"；在遵循教程时出错，花了大约30分钟才解决问题。
我试过"；盖茨比清洁"；多次删除并重新安装node_modules目录，但都没有成功。
我已经将我的查询提取到useSiteMetadata钩子中，并且最初意外地将"大写；D"；当我创建我的"；useSiteMetaData.js"；文件，这导致它被导入为"/hook/useSiteMetaData.js"；在我的Nav组件中。我已将文件名更改为"；useSiteMetadata.js"；但该进口仍在使用最初的资本"；D"；套管。
我将导入路径更正为"/hook/useSiteMetadata.js"；并运行"；盖茨比清洁"；并且错误消失了。
作为一个额外的注意事项，我还删除了localhost:8000中的cookie——我以前尝试过几次，但都没有效果，但我在修复导入路径大小写之前就做了，所以我想注意一下，以防万一。
我在执行Gatsby官方教程第4步时遇到了这个问题(此处：https://www.gatsbyjs.com/docs/tutorial/part-4/)
事实证明，我创建了一个Layout.js文件，但Gatsby将其导入为"；布局"；
更正导入的情况解决了问题
在我的案例中，当我不小心在组件的导入路径中使用了大写字母时，出现了这个问题。
错误
import FactionBanner from "../components/FactionBanner/FactionBanner";
正确
import FactionBanner from "../components/factionBanner/FactionBanner";
尝试全局安装
npm install -g gatsby-cli