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

[hasanshafiq29]

BUMP

[Vacilando]

BUMP

[hasanshafiq29]

@Vacilando

Can you tell me how you are facing this issue?

[Vacilando]

@hasanshafiq29

At http://localhost:8000/___graphql I was getting a white screen with console errors about "TooltipProvider".

After changing:
ENABLE_GATSBY_REFRESH_ENDPOINT=true
to
ENABLE_GATSBY_REFRESH_ENDPOINT=false
in .env.development
I can work again with the GraphQL interface.

But this is rather a workaround than a solution, of course.

[hasanshafiq29]

I think previously people here suggested to set ENABLE_GATSBY_REFRESH_ENDPOINT=false But you said that its working when its true.
@Vacilando

[tqureshi-uog]

I remain convinced it's due to a rogue dependency somewhere within Gatsby's implementation of GraphQL. Since I use npm, I'm not sure what the equivalent command is for yarn, but if it has its own version of npm clean install, try that...?

[Vacilando]

I think previously people here suggested to set ENABLE_GATSBY_REFRESH_ENDPOINT=false But you said that its working when its true. @Vacilando

@hasanshafiq29 my mistake, sorry. I've corrected my post above.

[hasanshafiq29]

I thought ENABLE_GATSBY_REFRESH_ENDPOINT was a flag and I was setting it false in gatsby-config.js
But then I saw that I have to set it in the ENV.
Now by setting it false, the error is gone
But still I think we need to keep this issue open as its only a way around

[o-michael-o]

Experiencing the same issue (GraphiQL editor WSOD) when upgrading from Gatsby 5.9.x to 5.12.x

Issue seems to be happening for us on all versions of Gatsby past 5.9.x:

• 5.10.x
• 5.11.x
• 5.12.x

The error is the same as mentioned above: Tooltip must be used within TooltipProvider

Can also confirm the same behaviour as @tcmacdonald and @ccesare above re: changing ENABLE_GATSBY_REFRESH_ENDPOINT to false fixes the WSOD problem > 5.9.x, however this isn't a suitable workaround for us as we need the endpoint working.

[rahimimo]

I am also getting Error: Tooltipmust be used withinTooltipProvider``
I reverted back even down to Gatsby 5.1 and the error was still there. It started to happen my project when I upgraded from Gatsby 4 to 5
I temporarily applied the suggested workaround to removed ENABLE_GATSBY_REFRESH_ENDPOINT from my .env file and it worked.
But I need this to be fixed to set up the preview server and get the refreshing content. It is not only the white screen and blank page on ___graphql but also the refresh endpoint is showing 404 and does not update the content.

[kimdomenick]

I don’t want to confuse the issue… my situation was a little bit different, but maybe this will help someone.

I had the same Tooltip error and behavior a couple weeks ago, running Gatsby 5.7, and it seemed to start out of nowhere – I didn’t update anything Gatsby-related or within my project. To my knowledge, the only thing I updated was my local VS Code.

After completely nuking my local project and restarting Gatsby develop, I was able to get a second error, and this is what allowed me to troubleshoot further.

Something, somewhere is using this @parcel/watcher library.  And in July, they changed up the architecture and don't include all the binaries for every operating system.
https://github.com/parcel-bundler/watcher/releases/tag/v2.2.0

I don't know if it's Gatsby or VS Code or what, but I now have to include this in my package.json:

"optionalDependencies": {
    "@parcel/watcher-darwin-x64": "2.2.0"
  },

This ^^ fixed my Tooltip error. I wish I could explain it better, but this worked for me.

[rahimimo]

I applied the above but did not fix.

What FIXED my issue is replacing
gatsby-graphiql-explorer "^3.12.1"
by
gatsby-graphiql-explorer "<^3.12.0"
in my yarn.lock and removing
the old resolved in the yarn.lock

[email protected]:
  version "3.12.1"
  resolved "https://registry.yarnpkg.com/gatsby-graphiql-explorer/-/gatsby-graphiql-explorer-3.12.1.tgz#c49f3ddc623259f313085bd6190bf2e36b89860e"
  integrity sha512-ugm5vUBP0AQ4Dr5cMqegi2hURCIxlFEahP1f+w7H10kwQ1VR/OIKLGW46JcrnF8LGPmQ99bYTptL19Dv7hECXA==

and run yarn install
which resulted in installing

gatsby-graphiql-explorer@<3.12.0:
  version "3.11.0"
  resolved "https://registry.yarnpkg.com/gatsby-graphiql-explorer/-/gatsby-graphiql-explorer-3.11.0.tgz#c49f3ddc623259f313085bd6190bf2e36b89860e"
  integrity sha512-ugm5vUBP0AQ4Dr5cMqegi2hURCIxlFEahP1f+w7H10kwQ1VR/OIKLGW46JcrnF8LGPmQ99bYTptL19Dv7hECXA==

then removing the public and cache folder and run the gatsby develop

It has nothing to do with the gatsby version, it is the upadte in the gatsby-graphiql-explorer which has caused the issue and upgrading to gatsby probably as a side effect upgrade the existing grqphql-explorer.

With this workaround you do not have to set the refresh flag to off.

[phpMagpie]

I can confirm that rolling back to 3.11.0 got it working again for me:
npm i [email protected]

I'm currently working with gatsby 5.12.7

[maria404]

This is still happening with the latest version of Gatsby and none of the above-mentioned fixes work.

[GarethChetwood]

Commenting out ENABLE_GATSBY_REFRESH_ENDPOINT=true from my dev env file fixed it for me.

I was getting the exact same error as OP, the tooltip thing

[ItsMeAra]

none of the ideas here worked for me, still can't get it to work.

[EKarpinsky]

World class React framework

Anybody who chooses Gatsby in 2024 is in for a wild ride

[stoutatnerdery]

This is currently happening to one of our projects, across multiple machines. Adding ENABLE_GATSBY_REFRESH_ENDPOINT=false fixes the issue.

[phpMagpie]

ENABLE_GATSBY_REFRESH_ENDPOINT=false does not fix the problem if you need to be able to live refresh the GraphQL data.

When I run monthly maintenance on projects, the package tries to update, I then:

• npm i [email protected]
• Go through package-lock.json and update all references to this package to ensure they are using 3.11.0

This allows me to work with /__graphql with ENABLE_GATSBY_REFRESH_ENDPOINT=true.

This is not a fix, it is a workaround, but it has worked every month since my comment in Nov:
#38634 (comment)

[EKarpinsky]

ENABLE_GATSBY_REFRESH_ENDPOINT=false does not fix the problem if you need to be able to live refresh the GraphQL data.

When I run monthly maintenance on projects, the package tries to update, I then:

• npm i [email protected]
• Go through package-lock.json and update all references to this package to ensure they are using 3.11.0

This allows me to work with /__graphql with ENABLE_GATSBY_REFRESH_ENDPOINT=true.

This is not a fix, it is a workaround, but it has worked every month since my comment in Nov:
#38634 (comment)

You manually update package-lock? Why not just use the resolutions property in package.json?

[Kearnol]

You manually update package-lock? Why not just use the resolutions property in package.json?

☝️... this.

I was experiencing this WSOD issue with "gatsby": "^5.13.3" as well.

Adding "gatsby-graphiql-explorer": "~3.11.0" to my "resolutions" field in package.json and re-running yarn has got me up and running. I'd definitely recommend this over manually updating the package-lock.json.

To the Gatsby developers, gatsby@^5.13.3 has a dependency of gatsby-graphiql-explorer "^3.13.1" and this still seems to be broken with the same error:

`Tooltip` must be used within `TooltipProvider`

I have not validated this theory, but I propose this issue may have been caused by #38279, since 3.11 is stable.

If the required tooltip provider is rendered in some other part of the DOM, perhaps using createPortal over createRoot for the graphiql explorer would help resolve this?

createPortal docs: https://react.dev/reference/react-dom/createPortal

[maria404]

This is still an issue in April 2024. Not being able to browse the GraphQL explorer is a huge letdown.

Downgrading the version of the explorer to 3.11.0 as suggested by @Kearnol fixes the issue for us.

Edit: Note that you need a hard refresh of the browser cache in order for it to take effect.

This is the package.json setting with npm:

  "overrides": {
    "gatsby": {
      "gatsby-graphiql-explorer": "3.11.0"
    }
  }

[receter]

I tried to debug the issue, this is what I found:

This is the line that is causing the error:

gatsby/packages/gatsby-graphiql-explorer/src/app.jsx

Line 173 in ffada73

<RefreshDataSourceButton onClick={refreshExternalDataSource} />

This is what is rendered:
https://github.com/gatsbyjs/gatsby/blob/ffada739e71d048ff7fc86cc91dfc82c05994018/packages/gatsby-graphiql-explorer/src/toolbar.jsx

It is basically a ToolbarButton from "@graphiql/react" that is passed to <GraphiQL> as additionalContent in the toolbar prop.

This however does not work, maybe this is an issue with <GraphiQL>.

Wrapping the <ToolbarButton> inside gatsby-graphiql-explorer in a <Tooltip.Provider> would kind of fix the issue but with caveats (the delay of the tooltip is not "shared" with the other Buttons).

Another option would be to use <GraphiQL.Toolbar> to customize the toolbar, but in this case the existing buttons need to be duplicated. Using a custom button instead of the one from "@graphiql/react" would also work.

graphql/graphiql#3796

graphql/graphiql#1928