GraphiQL White Screen of Death on Gatsby V5.11.0 about gatsby HOT 34 OPEN

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 

from gatsby.

@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.

from gatsby.

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.

from gatsby.

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

from gatsby.

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

from gatsby.

BUMP

from gatsby.

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

from gatsby.

@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.

from gatsby.

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.

from gatsby.

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.

from gatsby.

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.

from gatsby.

World class React framework

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

from gatsby.

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

from gatsby.

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.

from gatsby.

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.

from gatsby.

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

from gatsby.

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.

from gatsby.

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

from gatsby.

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)

from gatsby.

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

from gatsby.

@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

from gatsby.

BUMP

from gatsby.

BUMP

from gatsby.

@Vacilando

Can you tell me how you are facing this issue?

from gatsby.

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

from gatsby.

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...?

from gatsby.

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.

from gatsby.

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.

from gatsby.

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.

from gatsby.

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

from gatsby.

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

from gatsby.

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

from gatsby.

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)

from gatsby.

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?

from gatsby.