Gatsby: Production site have error on console about query but the content is in the DOM

[armandsalle]

Description

Hi all! I'm French and my English is not perfect, sorry in advance.

The project uses Gatsby and Prismic. When I develop the site, I don't have any error, when I build the site I don't have any error either, but when the site is deployed on Netlify or locally, I have an error of type : "Cannot read property 'layout' of undefined" 3 times in my console. However, all my content and HTML are there. The error comes from the layout component where I use the UseStaticQuery hook to get my content. I tried to rename the component, change its directory, use the export query, use the Gatsby-layout plugin etc... but the bug is still there. This problem breaks my component, so my menu can't open.

You can see the problems here: https://madlinevslr.com/
The code is here: https://github.com/armandsalle/Madline

Steps to reproduce

You need env variables to reproduce the bug, but here's how to do it:

• Clone the project
• npm i
• npm run clean
• npm run dev (everything is working fine)
• npm run clean
• npm run build (no error in the terminal)
• npm run serve (no error in the terminal)
• open a web browser and boom! Error in the console

Expected result

No errors in the console, and my menu should work fine.

Actual result

My menu is broken.

Environment

System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v12.16.2/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 81.0.4044.122
Firefox: 75.0
Safari: 13.1
npmPackages:
gatsby: ^2.20.27 => 2.20.36
gatsby-image: ^2.3.4 => 2.3.5
gatsby-plugin-manifest: ^2.3.6 => 2.3.7
gatsby-plugin-offline: ^3.1.2 => 3.1.5
gatsby-plugin-react-helmet: ^3.2.1 => 3.2.5
gatsby-plugin-sass: ^2.2.1 => 2.2.4
gatsby-plugin-sharp: ^2.5.6 => 2.5.7
gatsby-plugin-sitemap: ^2.3.5 => 2.3.6
gatsby-source-filesystem: ^2.2.2 => 2.2.5
gatsby-source-prismic-graphql: ^3.5.0 => 3.5.0
gatsby-transformer-sharp: ^2.4.6 => 2.4.7
gatsby-transformer-sqip: ^2.2.6 => 2.2.7

[LekoArts]

According to https://github.com/birkir/gatsby-source-prismic-graphql#staticquery-and-usestaticquery you can't use useStaticQuery. So try StaticQuery instead.

[armandsalle]

@LekoArts Thank you !!! It's working fine now 😎

[armandsalle]

Use StaticQuery instead of useStaticQuery