gatsby: Error in function useStaticQuery in ./.cache/gatsby-browser-entry.js:77 (After upgrade to v3)

Description

After starting (yarn start) a migrated gatsby v3 project, i am getting a weird error in the frontend (see screenshot). When using browser console i see some stacktraces involving my SEO component (which has a very basic and fully functional staticQuery expression in there) and a stacktrace regarding reach router.

This error stays but when i make a modification to the source, lets say i change a letter in the JSX, the error disappears and i have my running site.

On the shell i see this after saving my pseudo change (after that everything works)

<i> [webpack-dev-middleware] wait until bundle finished: /__original-stack-frame?moduleId=.%2F.cache%2Fgatsby-browser-entry.js&lineNumber=117&columnNumber=11
<i> [webpack-dev-middleware] wait until bundle finished: /__original-stack-frame?moduleId=.%2F.cache%2Fgatsby-browser-entry.js&lineNumber=117&columnNumber=11

See below the stacktrace in the browser console when being in error mode:

Uncaught Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
    at useStaticQuery (gatsby-browser-entry.js:77)
    at SEO (SEO.js:6)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
gatsby-browser-entry.js:77 Uncaught Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
    at useStaticQuery (gatsby-browser-entry.js:77)
    at Footer (Footer.js:10)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
react-dom.development.js:20085 The above error occurred in the <SEO> component:

    at SEO (webpack-internal:///./src/components/App/SEO.js:23:26)
    at RecoilRoot (webpack-internal:///./node_modules/recoil/es/recoil.js:1723:3)
    at Layout (webpack-internal:///./src/components/App/Layout.js:20:23)
    at CloudEntwicklung
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:39:30)
    at RouteHandler
    at div
    at FocusHandlerImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:5)
    at FocusHandler (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:19)
    at RouterImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Router
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:34:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:304:32)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
    at LocationHandler (webpack-internal:///./.cache/root.js:67:29)
    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Root
    at ee (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-c5d45e0e.js:808:13)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:127:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:97:23)
    at RootWrappedWithOverlayAndProvider

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
index.js:80 Uncaught Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
    at useStaticQuery (gatsby-browser-entry.js:77)
    at SEO (SEO.js:6)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
useStaticQuery @ gatsby-browser-entry.js:77
SEO @ SEO.js:6
react-dom.development.js:20085 The above error occurred in the <LocationProvider> component:

    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Root
    at ee (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-c5d45e0e.js:808:13)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:127:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:97:23)
    at RootWrappedWithOverlayAndProvider

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

(i shortened the stacktrace a little bit.)

Steps to reproduce

for me it was just starting the project.

Expected result

fully functional gatsby project 😉

Actual result

this error screenshot.

Bildschirmfoto 2021-03-03 um 10 20 09

Environment

System: OS: macOS 11.2.1 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Shell: 5.8 - /bin/zsh Binaries: Node: 15.8.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.5.0 - /usr/local/bin/npm Languages: Python: 3.9.0 - /Users/ml/.pyenv/shims/python Browsers: Chrome: 88.0.4324.192 Safari: 14.0.3 npmPackages: gatsby: ^3.0.0 => 3.0.0 gatsby-image: ^3.0.0 => 3.0.0 gatsby-plugin-google-analytics-reporter: ^1.1.1 => 1.1.1 gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1 gatsby-plugin-google-tagmanager: ^3.0.0 => 3.0.0 gatsby-plugin-html-attributes: ^1.0.5 => 1.0.5 gatsby-plugin-image: ^1.0.0 => 1.0.0 gatsby-plugin-manifest: ^3.0.0 => 3.0.0 gatsby-plugin-netlify: ^3.0.0 => 3.0.0 gatsby-plugin-netlify-cms: ^5.0.0 => 5.0.0 gatsby-plugin-percy: ^0.1.4 => 0.1.4 gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0 gatsby-plugin-react-helmet-canonical-urls: ^1.4.0 => 1.4.0 gatsby-plugin-react-svg: ^3.0.0 => 3.0.0 gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5 gatsby-plugin-sass: ^4.0.0 => 4.0.0 gatsby-plugin-sharp: ^3.0.0 => 3.0.0 gatsby-plugin-sitemap: ^3.0.0 => 3.0.0 gatsby-plugin-styled-components: ^4.0.0 => 4.0.0 gatsby-remark-classes: ^1.0.0 => 1.0.0 gatsby-remark-copy-linked-files: ^3.0.0 => 3.0.0 gatsby-remark-custom-blocks: ^3.0.0 => 3.0.0 gatsby-remark-images: ^4.0.0 => 4.0.0 gatsby-remark-prismjs: ^4.0.0 => 4.0.0 gatsby-remark-relative-images: ^2.0.2 => 2.0.2 gatsby-source-filesystem: ^3.0.0 => 3.0.0 gatsby-transformer-json: ^3.0.0 => 3.0.0 gatsby-transformer-remark: ^3.0.0 => 3.0.0 gatsby-transformer-sharp: ^3.0.0 => 3.0.0 npmGlobalPackages: gatsby-cli: 2.12.110

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 19 (8 by maintainers)

Commits related to this issue

Netlify CMS plugin: Don't use StaticQueryMapper The Netlify CMS plugin is spinning an extra webpack instance with almost every plugin from gatsby. Reusing the `StaticQueryMapper` plugin caused issues... — committed to ridem/gatsby by ridem 3 years ago
fix(gatsby-plugin-netlify-cms): Don't use StaticQueryMapper (#30599) The Netlify CMS plugin is spinning an extra webpack instance with almost every plugin from gatsby. Reusing the `StaticQueryMapper... — committed to gatsbyjs/gatsby by ridem 3 years ago
fix error based on https://github.com/gatsbyjs/gatsby/issues/29951\#issuecomment-811089567 — committed to tricitiesvote/tricitiesvote.com by adamavenir 8 months ago

Most upvoted comments

While this is fixed in gatsby, I can share the configuration that fixed the issue for me:

{
  resolve: "gatsby-plugin-netlify-cms",
  options: {
    ...yourOtherOptions,
    customizeWebpackConfig: (config) => {
      config.plugins = config.plugins.filter(
        (plugin) => plugin.constructor.name !== "StaticQueryMapper"
      );
    },
  },
}

If this is confirmed, it will just be a matter of adding that string to https://github.com/gatsbyjs/gatsby/blob/f628c3801226f5b500d74b5b41bca4caa72a9e00/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js#L172

ridem on Mar 31, 2021

It seems it has something to do with gatsby-plugin-netlify-cms. When i remove this plugin, the error disappears.

logemann on Mar 3, 2021

@ridem Thanks for sharing. It finally works now! Definitely worth adding this to the plugin directly so that others will not be affected by that anymore.

phipag on Mar 31, 2021

Having the same issue on Mac OS machine, while the project is running completely fine on a Windows machine. I’ve tried updating/upgrading all the packages to the latest version, but it still just displays the same error.

steviss on Mar 23, 2021

@yurist38 i dont use MDX. So the error is not related to that.

logemann on Mar 22, 2021

The same happened to me, after the update to Gatsby 3 i had the error. In my case the error was in the index.js page.

Instead of using useStaticQuery inside the function that returns the JSX i have just added:

export const query = graphql`....

And changed the page in order to automatically receive data:

const IndexPage = ({data}) => {

Please note that i have netflify-cms but i didn’t remove them as it should not be the real problem

UPDATE: all my previous info are wrong since the error is still here and as @logemann says it goes away at the first change (you can just save a file, triggering the site reload). Note that in production everything works well and in development it happens only at the first start, subsequent reloads works.

lomby92 on Mar 13, 2021