GraphiQL White Screen of Death on Gatsby V5.11.0

[hasanshafiq29]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Error: Tooltip must be used within TooltipProvider

I am getting this error

Just open graphiQL and it loads for a second and then white screen

Reproduction Link

https://github.com/ample/gatsby-minimal-reproduction-38634/tree/main

Steps to Reproduce

Just open graphiQL and it loads for a second and then white screen

Expected Result

GraphiQL IDE should work

Actual Result

Page crashin

Environment

System:
    OS: macOS 13.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 117.0.5938.149
    Safari: 16.6
  npmPackages:
    gatsby: 5.11.0 => 5.11.0 
    gatsby-plugin-algolia-search: ^0.5.6 => 0.5.7 
    gatsby-plugin-google-tagmanager: ^5.12.1 => 5.12.1 
    gatsby-plugin-loadable-components-ssr: ^4.3.2 => 4.3.2 
    gatsby-plugin-manifest: ^5.12.1 => 5.12.1 
    gatsby-plugin-netlify: 5.1.1 => 5.1.1 
    gatsby-plugin-perf-budgets: ^0.0.18 => 0.0.18 
    gatsby-plugin-postcss: ^5.21.0 => 5.25.0 
    gatsby-plugin-preconnect: ^1.4.0 => 1.4.0 
    gatsby-plugin-react-helmet: ^6.12.0 => 6.12.0 
    gatsby-plugin-remove-console: ^0.0.2 => 0.0.2 
    gatsby-plugin-resolve-src: ^2.0.0 => 2.1.0 
    gatsby-plugin-sass: ^6.12.1 => 6.12.1 
    gatsby-plugin-sitemap: ^6.12.1 => 6.12.1 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.27 => 1.1.31 
    gatsby-source-contentstack: ^5.1.0 => 5.1.0 
    gatsby-source-remote-csv: ^1.0.1 => 1.0.1

Config Flags

flags: {
DEV_SSR: false,
PRESERVE_FILE_DOWNLOAD_CACHE: true,
PARALLEL_SOURCING: true
},

[tqureshi-uog]

We're having the exact same problem! Thank you for opening this issue. In our case, we notice it doesn't happen with one of our repositories that still uses Gatsby v5.11.0. It does, however, happen on a different one using v.5.12.6 (and when I tested a feature branch updating the 5.11 repo to 5.12.6, it generated the white screen of death too).

So...something apparently happened between Gatsby v5.11.0 and v5.12.? to cause this.

[hasanshafiq29]

@tqureshi-uog Maybe you haven't updated the dependencies on the project which is using Gatsby 5.11.0. I have tried updating the dependencies and still issue persist. Also I don't want to upgrade to Gatsby to 5.12.6 as its having issue with gatsby-netlify-plugin and adapters.

[tqureshi-uog]

To clarify, we're not seeing the problem with Gatsby v5.11 - we are seeing the problem with the newer version, 5.12.6

Now that I look at your environment info, however, I see you're having the problem even though you're on v5.11. I'll take another look at our setup for the repo where GraphiQL is working.

[hasanshafiq29]

You may see if you clean install your dependencies again. or If not, I maybe having a dependency updated for 5.12.6 because I upgraded to 5.12.6 and then went back to 5.11.0

[tqureshi-uog]

Here's my information for the repository where GraphiQL works:

  System:
    OS: Linux 4.4 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 10.2.0 - ~/.nvm/versions/node/v18.17.1/bin/npm
  npmPackages:
    gatsby: ^5.11.0 => 5.11.0
    gatsby-plugin-image: ^3.11.0 => 3.11.0
    gatsby-plugin-manifest: ^5.11.0 => 5.11.0
    gatsby-plugin-mdx: ^5.11.0 => 5.11.0
    gatsby-plugin-react-helmet: ^6.11.0 => 6.11.0
    gatsby-plugin-sass: ^6.11.0 => 6.11.0
    gatsby-plugin-sharp: ^5.11.0 => 5.11.0
    gatsby-plugin-styled-components: ^6.11.0 => 6.11.0
    gatsby-source-drupal: ^6.11.0 => 6.11.0
    gatsby-source-filesystem: ^5.11.0 => 5.11.0
    gatsby-source-wordpress: ^7.11.0 => 7.11.0
    gatsby-transformer-sharp: ^5.11.0 => 5.11.0
    gatsby-transformer-yaml: ^5.11.0 => 5.11.0
  npmGlobalPackages:
    gatsby-cli: 5.12.1

Here's the info for the repo where GraphiQL does not work and gives the White Screen of Death:

  System:
    OS: Linux 4.4 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 10.2.0 - ~/.nvm/versions/node/v18.17.1/bin/npm
  npmPackages:
    gatsby: ^5.12.6 => 5.12.6
    gatsby-cli: ^5.12.2 => 5.12.2
    gatsby-plugin-asset-path: ^3.0.4 => 3.0.4
    gatsby-plugin-client-side-redirect: ^1.1.0 => 1.1.0
    gatsby-plugin-gatsby-cloud: ^5.12.1 => 5.12.1
    gatsby-plugin-google-analytics: ^5.12.0 => 5.12.0
    gatsby-plugin-google-tagmanager: ^5.12.1 => 5.12.1
    gatsby-plugin-image: ^3.12.1 => 3.12.1
    gatsby-plugin-manifest: ^5.12.1 => 5.12.1
    gatsby-plugin-react-helmet: ^6.12.0 => 6.12.0
    gatsby-plugin-robots-txt: ^1.8.0 => 1.8.0
    gatsby-plugin-root-import: ^2.0.9 => 2.0.9
    gatsby-plugin-sharp: ^5.12.1 => 5.12.1
    gatsby-plugin-styled-components: ^6.12.0 => 6.12.0
    gatsby-source-drupal: ^6.12.1 => 6.12.1
    gatsby-source-filesystem: ^5.12.0 => 5.12.0
    gatsby-source-wordpress: ^7.12.1 => 7.12.1
    gatsby-transformer-sharp: ^5.12.1 => 5.12.1
    gatsby-transformer-yaml: ^5.12.0 => 5.12.0
  npmGlobalPackages:
    gatsby-cli: 5.12.1

Again, the only relevant difference I can see is that my working repo is on v5.11.0 while the one that used to work but now doesn't is on 5.12.6

For what it's worth, here's the changelog for gatsby-graphiql-explorer: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-graphiql-explorer/CHANGELOG.md

Though this might all be a red herring and there's something else causing the problem.

[tcmacdonald]

I am experiencing this behavior when exporting ENABLE_GATSBY_REFRESH_ENDPOINT=true. When this value is set to false GraphiQL loads like normal.

Minimal reproduction using v5.12.6 is here.

  System:
    OS: macOS 12.6.3
    CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
  npmPackages:
    gatsby: ^5.12.4 => 5.12.6 

[ccesare]

I can confirm the same behavior as @tcmacdonald. We're on v5.12.5, and changing ENABLE_GATSBY_REFRESH_ENDPOINT to false fixes the issue.

[hasanshafiq29]

I have tried setting ENABLE_GATSBY_REFRESH_ENDPOINT to false on Gatsby v5.11.0. But still the issue persist.

[tqureshi-uog]

I believe I might have found a more consistent solution - upgrade GraphQL to v16.8.1 as per https://github.com/graphql/graphql-js/releases

We were alerted about this update after activating dependabot on our repository. Once we merged the GraphQL update PR it created, the WSOD went away (without having to change ENABLE_GATSBY_REFRESH_ENDPOINT to false- we've always had it set to true)

[hasanshafiq29]

@tqureshi-uog I don't have GraphQL package in my package.json. Should I add it?

[tqureshi-uog]

We don't have it in our package.json either - it's a dependency of Gatsby itself, I believe. When dependabot created its automated PR, only our package-lock.json file changed.

[hasanshafiq29]

@tqureshi-uog I checked my yarn-lock file and it already has v16.8.1 of GraphQL. I tried deleting yarn.lock and node modules and running yarn install but still it didn't solve the issue

[hasanshafiq29]

BUMP