javascript - 在 Gatsby 上加载(StaticQuery)白屏
问题描述
我收到有关此问题的错误报告:https ://github.com/gatsbyjs/gatsby/issues/25920 但是来自 Gatsby 的人似乎太忙而无法回答,所以也许这里的其他人知道这个问题。
请记住,我根本没有StaticQuery
在我的代码中使用该组件。
我遇到了同样的问题。
在拥有它之前我注意到其他一些开发人员:https ://github.com/gatsbyjs/gatsby/issues/6350
我看到一些开发人员建议export
从query
变量中删除 ,所以:
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
}
}
}
}
`
在我使用export
的那个组件const query
中,我的所有页面都以相同的方式定义,并且在没有问题之前。我已经升级和降级了 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' },
],
},
};
有任何想法吗?
解决方案
从浏览器中删除缓存存储并重新加载页面。或者硬重新加载页面,看看,这解决了我的问题。
推荐阅读
- r - 如何在 R 中自定义 Bland-Altman 图
- javascript - 如何在 React Js 中使用内存路由?使用路线的确切方法是什么?
- mysql - sql触发器确保约会之间的30天不起作用
- r - 通过`read.csv`将数据帧的所有列作为字符读取
- python - 如何在变量中创建占位符以在执行时插入值
- python - 如何查询 sqlalchemy 模型以获取昨天创建的所有记录?
- android - Kotlin 在导航抽屉示例中打开新片段
- node.js - 通过 HTTPS 使用 pm2 在 node.js 上托管 Create-React-App SPA
- bash - Bash 脚本 - 计算时间表的函数
- python - return pickle.load(f) 导致 _pickle.UnpicklingError: could not find MARK while