useStaticQuery not working from inside a plugin

[bradgarropy]

Description

I'm creating my own plugin, where I call useStaticQuery to grab siteMetadata.
The plugin loads fine, but fails to execute the query and shows this error.

Steps to reproduce

Here is a minimal reproduction.

1. Create a local plugin.
2. Export a React component from the plugin's index.js file.
3. Call useStaticQuery from within the React component.
4. Query something like this:

const query = graphql`
  {
    site {
      siteMetadata {
        title
      }
    }
  }
`

5. Add the plugin to your gatsby-config.js.
6. Import the React component from your plugin in your site's index.js.
7. Add the React component to index.js.
8. Watch it crash 💥

Expected result

I expect a data object to be returned that looks like this.

{
    data: {
        site: {
            siteMetadata: {
                author: "brad",
                title: "a cool post",
                description: "this post is about cats",
            }
        }
    }
}

Actual result

The site crashes upon running the static query, citing this error.

Environment

I can reproduce this with a local plugin, or one installed with npm link.
This is reproducible both on my local windows machine and on CodeSandbox.

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
Binaries:
Node: 12.13.1 - D:\nodejs\node.EXE
Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.5 - D:\nodejs\npm.CMD
Languages:
Python: 2.7.17 - /c/Python27/python
Browsers:
Edge: 44.18362.449.0
npmPackages:
gatsby: ^2.22.9 => 2.22.9
npmGlobalPackages:
gatsby-cli: 2.12.34
gatsby-plugin-seo: 0.0.1

---

I would love to join a Community Pair Programming session to work through this issue!

[LekoArts]

Thank you for opening this!

My colleague said that he unblocked you via Twitter DM. For people from the future finding this via Google: This issue is a duplicate of #7747 (comment) and the gist is that Gatsby only compiles the queries for files inside src so the author of this issue moved his file with the query inside that directory.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[bradgarropy]

This is more than sufficient! I'd like to recap what I learned here for others as well.

1. Ensure that your plugin's index.js file is located under the src directory. (aka src/index.js)
2. Remember that if you use npm link to develop your extension locally, you still have to include it in gatsby-config.js in the plugins array.

Great working with ya'll @LekoArts / @pieh!