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

[daledesilva]

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! [email protected] start: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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:
  Error: Cannot find module 'graphql' #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?

[vladar]

Hi @daledesilva

This sounds pretty strange. As if there is an issue with commonjs module resolutions. Maybe you have directory "gatsby" somewhere within your project (just a guess)?

If not - please check if the file node_modules/gatsby/graphql.js actually exists. Also, check what npm ls gatsby shows?

If there is nothing suspicious there - it would be incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

[daledesilva]

Thankyou! I began doing this but ended up finding the issue was my own silly mistake. I've posted it below.

[daledesilva]

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.