Loading(Static Query) white screen on gatsby build

[abedziak]

Description

This is a first issue I am submitting, so if there is any information missing, apologies.
After upgrading to gatsby@2.23.5 and running gatsby build I am seeing a white screen with no errros in the console.

Running gatsby develop is working as expected.

When running in a CI in AWS Codepipeline I can see the actual error

36 \|         _this.withRef = false;
--
540 | 37 \|         _this.setWrappedInstance = _this.setWrappedInstance.bind(_this);
541 | > 38 \|         return _this;
542 | \| ^
543 | 39 \|     }
544 | 40 \|     GraphQLBase.prototype.getWrappedInstance = function () {
545 | 41 \|         process.env.NODE_ENV === "production" ? invariant(this.withRef, 2) : invariant(this.withRef, "To access the wrapped instance, you need to specify " +
546 |  
547 | ·[0m
548 | ·[0m  ·[0m·[97m·[41mWebpackError·[0m·[37m·[41m:·[0m·[37m·[41m ·[0m·[97m·[41mThe result of this StaticQuery could not be fetched.·[0m
549 | ·[0m  ·[0m
550 | ·[0m  ·[0m·[90m-·[0m ·[0m·[93mbuild-html.js·[0m·[90m:·[0m·[93m107·[0m·[37m ·[0m·[37mdoBuildPages·[0m
551 | ·[0m  ·[0m  ·[0m·[90m[src]/[gatsby]/dist/commands/build-html.js:107:24·[0m
552 | ·[0m  ·[0m
553 | ·[0m

I have not made any changes to StaticQueries in any of the components since the last successful build.

Steps to reproduce

I'll try to make a repro demo but have literally zero time now.

Expected result

There should be an actual page on the screen

Actual result

Every page renders like that:

Environment

As mentioned above running version gatsby@2.23.5 also tried gatsby@2.23.19 as I was seeing a different error related to this issue #25481

  System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Languages:
    Python: 2.7.14 - /Library/Frameworks/Python.framework/Versions/2.7/bin/python
  Browsers:
    Chrome: 84.0.4147.89
    Firefox: 78.0.2
    Safari: 13.0.4
  npmGlobalPackages:
    gatsby-cli: 2.12.43

[jjprices]

Started getting the same thing when building on Linux (both RHEL7 and Ubuntu) without any version changes, was working fine last week.

[SpicyPete]

Getting the same thing after updating to the latest Gatsby. Works for me 2.24.4 and below.

[madalynrose]

Hi @abedziak, @SpicyPete, and @jjprices!

Sorry to hear you're running into an issue. Thank you for reporting it and adding context! To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction either in a public repo or on something like codesandbox. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[marcelo-umg]

I am getting this exact same issue.

I noticed some other devs before having it: #6350

I saw that some devs recommend removing the export from the query variable, so this:

const query = graphql`...`

Instead of this:

export const query = graphql`...`

But this is not my case. Everything was working good until some hours ago.

I have all of my pages with queries like this:

// imports 
const CollectionProduct = ({ data }) => {...}

export const query = graphql`
  query($handle: String!) {
    shopifyCollection(handle: { eq: $handle }) {
      products {
        id
        title
        handle
        createdAt
        }
      }
    }
  }
`

In that component I am using export on const query, all of my pages are defined the same way and before there were no problems.

So how is that today out of nothing this became an issue?

[SpicyPete]

Hmm yeah that seems like it may be that.

I am exporting query since it's required for the gatsby-plugin-graphql-codegen

[marcelo-umg]

My issues comes exactly after I added a .eslintrc.js config file to the project; is this an option that my project build fails on the live site due to ESLint?

Locally it works, I can build the project and see it on my localhost with no problems. But when I see the live site, it throws that Loading(StaticQuery) white screen. And I am not even using StaticQuery component anywhere. Only the useStaticQuery hook on non page nor templates components.

This is my ESLint config:

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' },
    ],
  },
};

[laradevitt]

Same thing here when upgrading from gatsby 2.23.22 and gatsby-cli 2.12.59.

Problem is with gatsby build and served up on localhost. If there is any other info I can provide let me know.

  System:
    OS: Windows 10 10.0.18363
   Binaries:
    Node: 13.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - ~\.yarn\bin\yarn.CMD
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    gatsby: ^2.18.5 => 2.24.9
    gatsby-image: ^2.2.34 => 2.4.13
    gatsby-paginate: ^1.1.1 => 1.1.1
    gatsby-plugin-catch-links: ^2.1.18 => 2.3.11
    gatsby-plugin-favicon: ^3.1.6 => 3.1.6
    gatsby-plugin-google-analytics: ^2.1.29 => 2.3.13
    gatsby-plugin-layout: ^1.1.16 => 1.3.10
    gatsby-plugin-manifest: ^2.2.30 => 2.4.20
    gatsby-plugin-netlify: ^2.1.27 => 2.3.11
    gatsby-plugin-netlify-cms: ^4.1.29 => 4.3.11
    gatsby-plugin-netlify-cms-paths: ^1.3.0 => 1.3.0
    gatsby-plugin-offline: ^3.0.24 => 3.2.20
    gatsby-plugin-react-helmet: ^3.1.16 => 3.3.10
    gatsby-plugin-robots-txt: ^1.4.0 => 1.5.1
    gatsby-plugin-sass: ^2.1.24 => 2.3.12
    gatsby-plugin-sharp: ^2.3.4 => 2.6.21
    gatsby-plugin-sitemap: ^2.2.22 => 2.4.11
    gatsby-plugin-web-vitals: ^1.0.3 => 1.0.3
    gatsby-remark-component: ^1.1.3 => 1.1.3
    gatsby-remark-copy-linked-files: ^2.1.31 => 2.3.11
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-grid-tables: ^0.0.3 => 0.0.3
    gatsby-remark-images: ^3.1.34 => 3.3.20
    gatsby-source-filesystem: ^2.1.39 => 2.3.22
    gatsby-transformer-remark: ^2.6.38 => 2.8.26
    gatsby-transformer-sharp: ^2.3.6 => 2.5.11

[herrwitzi]

I just had the same issue.
After downgrading babel-plugin-remove-graphql-queries to 2.9.12 it worked again.
(I think version 2.9.13 and 2.9.14 should also work, but I haven't tested it)
If you use yarn as your package manager, you can add

"resolutions": {
    "babel-plugin-remove-graphql-queries": "2.9.12"
},

to your package.json

[ooXavier]

The downgrade works for me (a little bit different with npm, but it works with 2.9.12 and gatsby 2.24.2).

[alec-francis]

This issue started impacting our production environment too today.

[robmarshall]

I started getting this issue today.

[abedziak]

I can confirm that I fixed this issue by upgrading to gatsby@2.24.7. This was mentioned on another issue that I cannot find to link to, anyway everything builds fine now.

[UliPlabst]

For me none of the version downgrades (babel-plugin-remove-graphql-queries or gatsby) or upgrades are working. I noticed that the fully rendered component shows for a split second before it gets replaced by Loading (Static Query). Will continue to investigate tomorrow.

[mgostisha]

As @abedziak reported, upgrading to gatsby v2.24.7 worked for me as well. Here's my version:

Gatsby CLI version: 2.12.54
Gatsby version: 2.24.7

[jjprices]

Also can confirm Gatsby version 2.24.7 resolved the issue for us as well.

[femesq]

Congratulations @herrwitzi, you are now a hero...

I was ready to jump out of my apartment's window for spending the last whole day with a mysterious issue that even rolling back the packages updates didn't solves the problem...

Was going crazy, and you saved me!
😆

Thanks for this!

[SpicyPete]

the fix from @herrwitzi works for me as well, thanks for that work-around.

[hendra-go]

+1 for the fix from @herrwitzi. I pin babel-plugin-remove-graphql-queries to version 2.9.14. Works for my personal project with gatsby@2.24.10 and latest version of all other gatsby packages.

So this mean is quite clear that babel-plugin-remove-graphql-queries cause this bug, hopefully this will make the bug tracking easier for gatsby team.

[wardpeet]

Fixed in gatsby@2.24.11

[Rychetsky]

I still have this bug after auto deploying to Vercel. When manually redeploying, the page is back. I'm on gatsby@2.24.24
Repo: https://github.com/Rychetsky/ImaginingAnIsland

[jsartisan]

Still having this issue on vercel. If any want to see what's really happening, here is the link - https://trend-d8qyatqwc.vercel.app

It's very frustrating. I don't see any error in the console or anything. The site just breaks.

[jsartisan]

anyone looking into this?

[ClementVion]

I am still having this issue locally too. The proposed solutions above don't work for me

[Rychetsky]

I solved it on vercel with pinning babel-plugin-remove-graphql-queries to version 2.9.12 with npm-force-resolutions, since then I haven't had this problem anymore.

[marklegault]

Going to try out downgrading babel-plugin-remove-graphql-queries, but I started having this problem out of the blue about 4 weeks ago, I've made sure everything is updated, deleted the cache folders as was suggested in the other issue. It's happening on my local and live version of the site, but the problem is that it's extremely random and impossible to reproduce. As soon as you reload the page, it's gone, and won't come back even if you clear the cache. Then randomly it will happen again. I've had consistent reports of it popping up randomly no matter what I do. But it seems to be limited to Chrome.

[rub1e]

This could probably be re-opened as it's an ongoing issue: I've never seen it before, but I upgraded to gatsby 2.24.53 yesterday and now I can't get rid of it.

• Only on production builds (gatsby cloud), doesn't happen if I build and serve locally using gatsby build / gatsby serve
• Only on mobile, not desktop
• I tried pinning babel-plugin-remove-graphql-queries to 2.9.12, no effect

Currently trying a rebuild after clearing the cache, will update this comment if it has any effect.

The even more frustrating aspect is that Gatsby Cloud told me I needed to upgrade core gatsby to solve an issue that was stopping our builds from working, so I can't downgrade

[jsartisan]

@rub1e I solved this by removing the static query altogether. I had to move the static query to page level and pass down the data to the actual component. My client got frustrated with us due to this bug. :/

[yihong0618]

@jjprices
I have the same problem. when local it always work fine. But in vercel not, I must rebuild it once by hand, I will try to remove the static query too~

[yihong0618]

@jjprices
Find a way to solve this.
Because there is cache in vercel or Netlify.
you need to change yarn or npm build from gatsby build to gatsby clean && gatsby build can solve this problem.
Which can aviod the cache.

[moritzsalla]

Has this bug been fixed?

I’m on 2.24.50 and keep running into this issue. Builds don’t throw any errors but the site renders white. Sometimes individual pages will make the entire site crash.

Deleting the cache on every build increases build times by three fold.

[grahamd711]

This bug seems to still be happening in production for us. We are on Gatsby 3.1.2 and babel-plugin-remove-graphql-queries version 3.5.0

We run two StaticQueries in two separate components that render on the homepage. Here is the code for them:

Gist 1: https://gist.github.com/grahamd711/5855edb75457d804ce1d2c391a019a94

Gist 2: https://gist.github.com/grahamd711/28f62bc44b8abc82e856f14cc7b872df

There are no errors in the console and nothing to display besides the Loading(StaticQuery) and the white page. This error only occurs on production and not on development.

We have tried to clear the cache manually within Gatsby Cloud and the issue still occurs intermittently. Is anyone running into this same problem or have advice on how to fix?

Here is my package.json

  "name": "",
  "private": true,
  "description": "",
  "version": "0.1.0",
  "author": "",
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.12.12",
    "animate.css": "^4.1.1",
    "app-root-dir": "^1.0.2",
    "autoprefixer": "^10.2.1",
    "basic-auth": "^2.0.1",
    "classnames": "^2.2.6",
    "classnames-loader": "^2.1.0",
    "colors": "^1.4.0",
    "compose-function": "^3.0.3",
    "compression": "^1.7.4",
    "cookie": "^0.4.1",
    "cookie-parser": "^1.4.5",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "date-fns": "^1.29.0",
    "dotenv": "^8.2.0",
    "email-regex": "^4.0.0",
    "emoji-regex": "^9.2.0",
    "express": "^4.17.1",
    "express-redis-cache": "^1.1.3",
    "extract-css-chunks-webpack-plugin": "^4.9.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^6.2.0",
    "gatsby": "^3.1.2",
    "gatsby-image": "^3.1.0",
    "gatsby-plugin-csp": "^1.1.3",
    "gatsby-plugin-image": "^1.1.2",
    "gatsby-plugin-manifest": "^3.1.0",
    "gatsby-plugin-meta-redirect": "^1.1.1",
    "gatsby-plugin-offline": "^4.1.0",
    "gatsby-plugin-react-helmet": "^4.1.0",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-root-import": "^2.0.6",
    "gatsby-plugin-sass": "^4.1.0",
    "gatsby-plugin-sharp": "^3.1.2",
    "gatsby-plugin-sitemap": "^3.1.0",
    "gatsby-source-custom-api": "^2.1.4",
    "gatsby-source-filesystem": "^3.1.0",
    "gatsby-source-prismic": "^3.3.4",
    "gatsby-transformer-sharp": "^3.1.0",
    "geolang-express": "^1.0.0",
    "github-slugger": "^1.3.0",
    "glob": "^7.1.6",
    "gsap": "^3.6.1",
    "happypack": "^5.0.1",
    "helmet": "^4.4.0",
    "hpp": "^0.2.3",
    "hsts": "^2.2.0",
    "html-webpack-plugin": "^4.5.1",
    "http-proxy-middleware": "^1.0.6",
    "is-object": "^1.0.2",
    "isomorphic-fetch": "^3.0.0",
    "json-stringify-safe": "^5.0.1",
    "JSONStream": "^1.3.5",
    "lodash": "^4.17.20",
    "md5": "^2.3.0",
    "mobx": "^6.1.3",
    "mobx-react": "^7.1.0",
    "mobx-react-devtools": "^6.1.1",
    "name-all-modules-plugin": "^1.0.1",
    "netlify-plugin-gatsby-cache": "^0.3.2",
    "node-notifier": "^9.0.0",
    "node-sass": "^5.0.0",
    "normalize.css": "^8.0.1",
    "offline-plugin": "^5.0.7",
    "p-map": "^4.0.0",
    "p-props": "^4.0.0",
    "p-reduce": "^2.1.0",
    "phone-regex": "^2.1.0",
    "postcss": "^8.2.4",
    "postcss-csso": "^5.0.0",
    "postcss-loader": "^4.1.0",
    "pretty-error": "^3.0.3",
    "prismic-javascript": "^3.0.2",
    "prismic-reactjs": "^1.3.3",
    "prop-types": "^15.7.2",
    "query-string": "^6.13.8",
    "raf": "^3.4.1",
    "react": "^16.14.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-animate-on-scroll": "^2.1.5",
    "react-async-bootstrapper": "^2.1.1",
    "react-async-component": "^2.0.0",
    "react-cookies": "^0.1.1",
    "react-css-transition-replace": "^4.0.2",
    "react-dom": "^16.14.0",
    "react-dropdown": "^1.9.1",
    "react-ga": "^3.3.0",
    "react-google-maps": "^9.4.5",
    "react-helmet": "^6.1.0",
    "react-highlight": "^0.13.0",
    "react-hot-loader": "^4.13.0",
    "react-inlinesvg": "^2.2.2",
    "react-jobs": "^1.0.1",
    "react-player": "^2.7.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scroll": "^1.8.1",
    "react-scroll-to-component": "^1.0.2",
    "react-side-effect": "^2.1.1",
    "react-sticky-el": "^2.0.5",
    "react-svg": "^11.2.2",
    "react-tabs": "^3.1.2",
    "react-transition-group": "^4.4.1",
    "react-universal-component": "^4.5.0",
    "react-waypoint": "^8.0.3",
    "regenerator-runtime": "^0.13.7",
    "rimraf": "^3.0.2",
    "sass": "^1.32.4",
    "sass-loader": "^10.1.1",
    "semver": "^7.3.4",
    "serialize-javascript": "^5.0.1",
    "source-map-support": "^0.5.19",
    "strip-indent": "^3.0.0",
    "striptags": "^3.1.1",
    "style-loader": "^2.0.0",
    "svg-to-jsx-loader": "^2.0.1",
    "tweenr": "^2.2.1",
    "user-home": "^2.0.0",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "eslint": "^7.18.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.22.1",
    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.20",
    "prettier": "2.2.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "cacheDirectories": [
    "public/static"
  ]
}```

[laradevitt]

Just wanted to note that I ran into this problem recently and the solution was to unregister a service worker that was presumably hanging around from another build. My issue was local so I just unregistered it in Chrome DevTools. In production the answer might be to look at gatsby-plugin-remove-serviceworker.

Possibly related: Uncaught Error: The result of this StaticQuery could not be fetched. #26563

[CLantigua2]

I was having this issue on "gatsby": "^3.7.1" within my SEO component. I renamed it into Seo.js instead of SEO.js and the rendered message went away. I've yet to figure out how to satisfy the useStaticQuery hook as that seems to hold a different level of broken for me so I opted out of it for now.