Unhandled Runtime Error - Error in function useStaticQuery in ./.cache/gatsby-browser-entry.js:77

JHunter09 commented 3 years ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

No matter what I do, I simply cannot get useStaticQuery to work. I've tried putting it in different components, tried changing the name of the components to both start with a Capital letter and with a lowercase error, i've tried deleting the node modules folder and reinstalling, as well as using gatsby clean. Nothing seems to be working.

Reproduction Link

https://github.com/iamshaunjp/gatsby-tutorial/blob/lesson-10/src/components/Navbar.js

Steps to Reproduce

Implement useStaticQuery in any component

Expected Result

Have the query execute successfully, not prompt me with an error, and allow me to retrieve the contents of said query.

Actual Result

Environment

System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor             
  Binaries:
    Node: 14.17.0 - D:\Apps-Utils\nodejs\node.EXE
    Yarn: 1.22.15 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.0.0 - D:\Apps-Utils\nodejs\npm.CMD
  Languages:
    Python: 3.9.5
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38)
  npmPackages:
    gatsby: ^3.13.1 => 3.14.2 
    gatsby-link: ^3.14.0 => 3.14.0 
    gatsby-react-router-scroll: ^4.14.0 => 4.14.0 
  npmGlobalPackages:
    gatsby-cli: 3.14.1

Config Flags

No response

krichey15 commented 3 years ago

Getting the same error

using Gatsby 3.4.1

enkiBrant commented 3 years ago

Same problem... no plugins outdated, clean cache. No error into the terminal. query look's good...

Gatsby 3.14.2

Thank's

dwicke commented 3 years ago

Same problem encountered while following: https://www.gatsbyjs.com/docs/tutorial/part-4/

Gatsby 3.14.3

Thanks!

TheComeBackGuy commented 3 years ago

Same issue with a Frontend Masters course. Since it won't go away I'm pretty much dead in the water now.

krichey15 commented 3 years ago

@TheComeBackGuy @dwicke @enkiBrant not sure if it will help but at least for my use case I was able to convert to

TheComeBackGuy commented 3 years ago

@TheComeBackGuy @dwicke @enkiBrant not sure if it will help but at least for my use case I was able to convert to

I actually just did a "clean" and that worked it out.

enkiBrant commented 3 years ago

I solved my problem. but i tried so many things ... finally i don't know what fixed the problem ... sorry. next time i will write down what worked for me.

LekoArts commented 2 years ago

Hello!

Can you please update your reproduction to Gatsby 4 and explain the reproduction steps in more detail? Following your current instructions with Gatsby 4 I couldn't reproduce this. Thanks!

JHunter09 commented 2 years ago

@LekoArts

Hello!

Can you please update your reproduction to Gatsby 4 and explain the reproduction steps in more detail? Following your current instructions with Gatsby 4 I couldn't reproduce this. Thanks!

Sure thing, I have updated gatsby:

System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
  Binaries:
    Node: 14.17.0 - D:\Apps-Utils\nodejs\node.EXE
    Yarn: 1.22.15 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.3 - D:\Apps-Utils\nodejs\npm.CMD
  Languages:
    Python: 3.9.5
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.44)
  npmPackages:
    gatsby: ^4.1.2 => 4.1.2
    gatsby-link: ^3.14.0 => 3.14.0
    gatsby-react-router-scroll: ^4.14.0 => 4.14.0
    gatsby-source-strapi: ^0.0.0 => 0.0.0
  npmGlobalPackages:
    gatsby-cli: 4.1.1

This is the code I am attempting to use:

import React from 'react'
import { graphql, Link, useStaticQuery } from 'gatsby'
import * as styles from '../styles/navbar.module.css'

export default function Navbar() {

  const data = useStaticQuery(graphql`
    query SiteInfo {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  const {title} = data.site.siteMetadata

  return (
    <nav>

      <h1><img className={styles.logo} src="./logo.png" alt=""/>{title}</h1>
      <div className="links">
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/projects">Projects</Link>
        <Link to="/news">News</Link>
        <Link to="/contact">Contact</Link>
      </div>
    </nav>
  )
}

This is my gatsby-config:

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/gatsby-config/
 */

 module.exports = {
  siteMetadata: {
    title: `JH Industries`,
    siteUrl: `https://www.jhindustries.tk`,
    description: `Official site for JH Industries`,
    copyright: 'Copyright 2021 - JH Industries',
  },
}

And, as before, after running gatsby develop and navigating to localhost:8000, Instead of my site I am shown this:

minhtri0795 commented 2 years ago

I have same problem and resolved, do you have rename any component recently, if have you need to double check where that component import to, sometime when you change name,import path for component not change automatic too.

JHunter09 commented 2 years ago

@minhtri0795 I'm sorry, I'm not quite sure what you mean by your response.

github-actions[bot] commented 2 years ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions[bot] commented 2 years ago

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

gatsbyjs / gatsby