在 Gatsby 上加载（StaticQuery）白屏答案

【问题标题】：Loading (StaticQuery) white screen on Gatsby在 Gatsby 上加载（StaticQuery）白屏
【发布时间】：2020-11-12 04:47:59
【问题描述】：

我收到有关此问题的错误报告：https://github.com/gatsbyjs/gatsby/issues/25920 但是盖茨比的人似乎忙得无法回答，所以这里的其他人可能知道这个问题。

请记住，我的代码中根本没有使用 StaticQuery 组件。

我遇到了同样的问题。

在拥有它之前我注意到了其他一些开发者：https://github.com/gatsbyjs/gatsby/issues/6350

我看到一些开发人员建议从 query 变量中删除 export，所以这样：

const query = graphql`...`

而不是这个：

export const query = graphql`...`

但这不是我的情况。直到几个小时前，一切都运行良好。

我的所有页面都有这样的查询：

// this is my component
const CollectionProduct = ({ data }) => {...}

// and outside the component is the query
export const query = graphql`
  query($handle: String!) {
    shopifyCollection(handle: { eq: $handle }) {
      products {
        id
        title
        handle
        createdAt
        }
      }
    }
  }
`

在我在const query 上使用export 的那个组件中，我所有的页面都以相同的方式定义，并且在没有问题之前。我已经升级和降级了 Gatsby 的版本，但同样的问题。

在我向项目中添加了.eslintrc.js 配置文件之后，我的问题就出现了；这是因为 ESLint 导致我的项目在现场构建失败的选项吗？

它在本地工作，我可以构建项目并在我的localhost 上看到它，没有任何问题。但是当我看到现场直播时，它会抛出Loading(StaticQuery) 白屏。而且我什至没有在任何地方使用StaticQuery 组件。只有非页面和模板组件上的 useStaticQuery 挂钩。

这是我的 ESLint 配置：

module.exports = {
  globals: {
    __PATH_PREFIX__: true,
  },
  'parser': 'babel-eslint',
  parserOptions: {
    extraFileExtensions: ['.js'],    
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
    useJSXTextNode: true,
    include: ['**/*js'],
  },
  env: {
    es6: true,
    node: true,
    jest: true,
    browser: true,
    commonjs: true,
    serviceworker: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended', 'semistandard', 'plugin:import/react'],
  plugins: ['react'],
  rules: {
    semi: 'off',
    'strict': 0,
    curly: [1, 'all'],
    'no-console': 'error',
    "react/prop-types": 0,
    camelcase: ['off', {}],
    'react/jsx-uses-vars': 1,
    'react/jsx-uses-react': 1,
    'react/jsx-boolean-value': 2,
    "react/display-name": 'warn',
    'react/react-in-jsx-scope': 1,
    'brace-style': ['error', '1tbs'],
    'comma-dangle': ['error', 'never'],
    'linebreak-style': ['error', 'unix'],
    'react-hooks/exhaustive-deps': 'off',
    'standard/no-callback-literal': [0, []],
    'padding-line-between-statements': [
      'error',
      { blankLine: 'always', prev: '*', next: 'return' },
      { blankLine: 'always', prev: '*', next: 'multiline-const' },
      { blankLine: 'always', prev: 'multiline-const', next: '*' },
      { blankLine: 'always', prev: '*', next: 'block-like' },
      { blankLine: 'always', prev: 'block-like', next: '*' },
    ],
    'react/jsx-curly-brace-presence': [
      'error',
      { props: 'never', children: 'never' },
    ],
  },
};

有什么想法吗？

【问题讨论】：

这有什么更新吗？我在使用 Gatsby 4.2.0 时遇到了这个问题，但我认为缓存有问题

标签： javascript reactjs ecmascript-6 gatsby eslint

【解决方案1】：

我有一个类似的问题突然发生了。 https://github.com/gatsbyjs/gatsby/issues/24890 有人建议尝试清理您的项目。

对我来说，删除 node_modules 和 yarn.lock 然后重新生成它们就可以了！

编辑：seems to have been fixed 与 gatsby 2.24.11

【讨论】：

我用的是"gatsby": "^3.7.1"，好像还没修复?

【解决方案2】：

使用npm i -g gatsby-cli 更新 cli 为我解决了这个问题

【讨论】：

【解决方案3】：

从浏览器中删除缓存存储并重新加载页面。或者硬重新加载页面，看看，这解决了我的问题。

【讨论】：