'gatsby-source-graphql' causes load plugins error quoting 'gatsby/graphql' - plugins

Question

I have a working Gatsby install that I've been adding to, however, in trying to build in some graphQL build-time data fetching, I've run into an issue that causes error when running npm start (gatsby develop) or gatsby build.
I installed gatsby-source-graphql as described here:
https://www.npmjs.com/package/gatsby-source-graphql
And I included it in my gatsby-config.js like this:
module.exports = {
// Optional
siteMetadata: {
title: `Title from siteMetadata`,
},
plugins: [
{
resolve: `gatsby-plugin-manifest`,
options: {
name: "Project Template",
short_name: "PT",
start_url: "/",
background_color: "#6b37bf",
theme_color: "#6b37bf",
// Enables "Add to Homescreen" prompt and disables browser UI (including back button)
// see https://developers.google.com/web/fundamentals/web-app-manifest/#display
display: "standalone",
icon: "src/images/icon.png", // This path is relative to the root of the site.
// An optional attribute which provides support for CORS check.
// If you do not provide a crossOrigin option, it will skip CORS for manifest.
// Any invalid keyword or empty string defaults to `anonymous`
crossOrigin: `use-credentials`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
// GraphQL APIs for use during build-time.
// https://www.npmjs.com/package/gatsby-source-graphql
//////////////////////////////////////////////////////
{
resolve: "gatsby-source-graphql",
options: {
// Arbitrary name for the remote schema Query type
typeName: "SpaceX",
// Field under which the remote schema will be accessible. You'll use this in your Gatsby query
fieldName: "spaceX",
// Url to query from
url: "https://api.spacex.land/graphql/",
},
},
// {
// resolve: "gatsby-source-graphql",
// options: {
// // Arbitrary name for the remote schema Query type
// typeName: "SWAPI",
// // Field under which the remote schema will be accessible. You'll use this in your Gatsby query
// fieldName: "swapi",
// // Url to query from
// url: "https://swapi-graphql.netlify.app/.netlify/functions/index",
// },
// },
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-react-helmet`,
`gatsby-theme-material-ui`,
{
resolve: `gatsby-plugin-nprogress`,
options: {
// Setting a color is optional.
color: `tomato`,
// Disable the loading spinner.
showSpinner: false,
},
},
`gatsby-plugin-transition-link`,
`gatsby-plugin-layout`, // Trial and error showed this needs to be last (But that doesn't mean it will always work in the dev environment, try npm run clean or if that fails - test in build)
],
}
But it produces this error:
Error in "/Users//Documents/projects/project/node_modules/gatsby-source-graphql/gatsby-node.js":
Cannot find module 'gatsby/graphql'
Error: Cannot find module 'gatsby/graphql'
- loader.js:636 Function.Module._resolveFilename
internal/modules/cjs/loader.js:636:15
- loader.js:562 Function.Module._load
internal/modules/cjs/loader.js:562:25
- loader.js:692 Module.require
internal/modules/cjs/loader.js:692:17
- v8-compile-cache.js:159 require
[client]/[v8-compile-cache]/v8-compile-cache.js:159:20
- gatsby-node.js:8 Object.<anonymous>
[tbwa-project-template]/[gatsby-source-graphql]/gatsby-node.js:8:5
- v8-compile-cache.js:178 Module._compile
[client]/[v8-compile-cache]/v8-compile-cache.js:178:30
- loader.js:789 Object.Module._extensions..js
internal/modules/cjs/loader.js:789:10
- loader.js:653 Module.load
internal/modules/cjs/loader.js:653:32
- loader.js:593 tryModuleLoad
internal/modules/cjs/loader.js:593:12
- loader.js:585 Function.Module._load
internal/modules/cjs/loader.js:585:3
- loader.js:692 Module.require
internal/modules/cjs/loader.js:692:17
- v8-compile-cache.js:159 require
[client]/[v8-compile-cache]/v8-compile-cache.js:159:20
- resolve-module-exports.ts:197 resolveModuleExports
[client]/[gatsby]/src/bootstrap/resolve-module-exports.ts:197:26
- validate.ts:348 forEach
[client]/[gatsby]/src/bootstrap/load-plugins/validate.ts:348:31
- Array.forEach
- validate.ts:340 collatePluginAPIs
[client]/[gatsby]/src/bootstrap/load-plugins/validate.ts:340:20
not finished load plugins - 0.727s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project-template#1.0.0 start: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project-template#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/_logs/2021-02-04T00_31_34_070Z-debug.log
What I've tried:
I've tried two different gatsby-source-graphql definitions in the config (only ever one at a time), but both produce the error. THe second one (commented out above) is taken directly from The github page example and the Gatsby example.
I've tried changing the order of the plugins (i've tried every position) but still get the error.
If I comment any and all gatsby-source-graphql sections in the config, it doesn't produce the error.
If I comment out all plugins except one of the gatsby-source-graphql sections, I still get the exact same error.
I've also tried removing the node_modules folder, running npm run clean, and then npm install again with no change.
I've tried DanceParty's solution described in the link below as well with no change:
https://github.com/gatsbyjs/gatsby/issues/8249
I've tried running npm update and npm install npm#latest -g and saw no change.
My environment report using gatsby info --clipboard is:
System:
OS: macOS 10.15.7
CPU: (4) x64 Intel(R) Core(TM) i5-6287U CPU # 3.10GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.23.1 - /usr/local/bin/node
npm: 6.14.10 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 88.0.4324.96
Firefox: 85.0
Safari: 14.0.2
npmPackages:
gatsby: ^2.26.1 => 2.32.0
gatsby-image: ^2.10.0 => 2.11.0
gatsby-plugin-layout: ^1.9.0 => 1.10.0
gatsby-plugin-manifest: ^2.11.0 => 2.12.0
gatsby-plugin-material-ui: ^2.1.10 => 2.1.10
gatsby-plugin-nprogress: ^2.9.0 => 2.10.0
gatsby-plugin-react-helmet: ^3.8.0 => 3.10.0
gatsby-plugin-sharp: ^2.13.0 => 2.14.0
gatsby-plugin-transition-link: ^1.20.5 => 1.20.5
gatsby-source-filesystem: ^2.10.0 => 2.11.0
gatsby-theme-material-ui: ^1.0.13 => 1.0.13
gatsby-transformer-sharp: ^2.11.0 => 2.12.0
npmGlobalPackages:
gatsby-cli: 2.19.0
Any ideas?

Answer 1

I started creating a minimal reproduction and adding everything back one by one, but decided to play more with my first setup for a little...and I'm glad I did.
Here's what caused the issue:
This Gatsby install is part of a Project Template we use which includes backend code, front-end, pipeline deployment scripts, etc.
The structure is similar to:
ProjectTemplate folder
client folder
server folder
other folders
The Gatsby install lives in the client folder but occasionally I need to go into the root folder to do certain things.
So what happened!?
I accidentally installed gatsby-source-graphql into the root folder instead of the client folder. That's all.
I should have picked this up when I ran gatsby info --clipboard as it's clearly not listed as a dependency.