Error in function useStaticQuery

[clovus]

Description

Gatsby develop fails with an "Unhandled Runtime Error" at ./.cache/gatsby-browser-entry.js with message "Error in function useStaticQuery. 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..."

Strangely, running "gatsby build" returns no errors, and deploys to the web without issues. See deployed project:
https://master.d1gyj0ulptzf6p.amplifyapp.com/

Steps to reproduce

Run "gatsby develop"
Terminal shows no errors
Opening http://localhost:8000/ in browser shows Gatsby error (see below screenshot)

Expected result

Opening browser (Chrome) at http://localhost:8000/ should show project preview in browser

Actual result

Gatsby develop fails with an "Unhandled Runtime Error" at ./.cache/gatsby-browser-entry.js with message "Error in function useStaticQuery. 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..."

Environment

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
Binaries:
Node: 14.15.3 - C:\Program Files\nodejs\node.EXE
npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.9.1 - /c/Python39/python
Browsers:
Edge: Spartan (44.18362.449.0)
npmPackages:
gatsby: ^2.31.1 => 2.31.1
gatsby-image: ^2.5.0 => 2.5.0
gatsby-plugin-manifest: ^2.6.1 => 2.6.1
gatsby-plugin-offline: ^3.4.0 => 3.4.0
gatsby-plugin-react-helmet: ^3.4.0 => 3.4.0
gatsby-plugin-sharp: ^2.8.0 => 2.8.0
gatsby-source-filesystem: ^2.5.0 => 2.5.0
gatsby-transformer-sharp: ^2.6.0 => 2.6.0
npmGlobalPackages:
gatsby-cli: 2.13.1

[ascorbic]

Hi. Could you give some mroe information to help us reproduce the problem? e.g. are you able to share the file in question, or can you create a minimal reproduction? Thanks.

[YesiMg18]

Same error here

[jaspervalero]

I'm also running into the same issue mentioned. This can be reproduced by following part four of the Gatsby tutorial series which uses useStaticQuery and then running gatsby develop. It will load up and then error out.

[LekoArts]

Hi!

Since we didn't receive an answer for 7 days or more about the ask of a reproduction I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do answer here or open a new issue with a reproduction. Thanks!

[jaspervalero]

Hi!

Since we didn't receive an answer for 7 days or more about the ask of a reproduction I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do answer here or open a new issue with a reproduction. Thanks!

Ummm... scroll up to my comment (just above yours) and you'll see I added how I'm reproducing it. ;)

[kenchoong]

The component that useStaticQuery have to in first level of component

| componet_folder
| -some folder 1
| - - anything.js
| - some folder 2
| - - someotherthing.js
| - seo.js <-- the is the file that useStaticQuery, same level with some folder 1

Move the seo.js to the top level in component, if move to some folder 1, it will having the error above

[eerrecalde]

Thanks @kenchoong!

In addition to that, I'd say that the issue I was having it when using either useStaticQuery or StatiQuery, in a component that isn't in first level folder.

My workaround for a monorepo structure to avoid repeating code is the following (Not sure if it's the best approach):

shared/src/components/seo.js SEO <- The original SEO component, but instead of doing the query, it receives its result as a prop, e.g: function SEO({metadata}){...}
my-app/src/components/seo.js <- Only a wrapper that includes and returns the SEO component above, and this is where I do the useStaticQuery and pass it over to the SEO as prop e.g: return <SEO metadata={metadata} />