Gatsby: 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 [email protected] 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 [email protected] also tried [email protected] 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: https://github.com/gatsbyjs/gatsby/issues/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 [email protected]. 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 [email protected] 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 [email protected]

[Rychetsky]

I still have this bug after auto deploying to Vercel. When manually redeploying, the page is back. I'm on [email protected]
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.