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所指出的，在this GitHub thread中，有几种方法可以解决类似的问题：

删除JFrame，node_modules，然后重新安装
删除.cache，node_modules，将Gatsby修复为.cache /升级到v2.23.3，该bug已修复并再次安装

它似乎与loading staticQuery bug有关，无法在全新安装中复制。最后的试用是删除您的^2.26.1 / package-lock并重新生成。

Answer 2

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

现在可以在版本 2.24.13

中使用

如果package.json为："gatsby": "^2.23.18"，则只需删除yarn.lock并执行yarn install即可获取最新版本（您可以通过执行yarn list gatsby来检查gatsby版本）

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

Answer 3

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

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

在索引页面（大约是我们的第一个子页面）中，我们确实导入了这样的组件：import Index from '../../components/AboutUs';在开发中起作用，但是在生产中，我们需要将索引添加到import Index from '../../components/AboutUs/Index'; < / p>

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

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",

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

Gatsby-无法获取此StaticQuery的结果

6 个答案: