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.

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

[ridem]

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

[logemann]

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