gatsby-source-graphql@2.2.1 throws error: Cannot use GraphQLDirective "@include" from another module or realm

[stevebreault]

Description

While deploying a new site version where CI runs its own build for deployment, I am now running into a new error. When running gatsby develop, as it runs though plugin initialization, I am now getting the following error:

"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:

Cannot use GraphQLDirective "@include" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

https://yarnpkg.com/en/docs/selective-version-resolutions

Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.

  74 |     if (!sdl) {
  75 |       introspectionSchema = await introspectSchema(link);
> 76 |       sdl = printSchema(introspectionSchema);
     |             ^
  77 |     } else {
  78 |       introspectionSchema = buildSchema(sdl);
  79 |     }

File: node_modules/gatsby-source-graphql/gatsby-node.js:76:13

Which is followed by the following warning:

Error: Cannot use GraphQLDirective "@include" from another module or realm.
  Ensure that there is only one instance of "graphql" in the node_modules
  directory. If different versions of "graphql" are the dependencies of other
  relied on modules, use "resolutions" to ensure only one version is installed.
  https://yarnpkg.com/en/docs/selective-version-resolutions
  Duplicate "graphql" modules cannot be used at the same time since different
  versions may have different capabilities and behavior. The data from one
  version used in the function from another could produce confusing and
  spurious results.

Previous to this, the project was running gatsby-source-graphql@2.1.33. Downgrade is however not fixing the issue.

Steps to reproduce

List of installed dependencies, updated from hello-world starter:

├── @appbaseio/reactivesearch@3.7.1
├── @aws-amplify/api@2.2.0
├── @aws-amplify/auth@2.1.7
├── @aws-amplify/pubsub@1.3.3
├── @fortawesome/fontawesome-svg-core@1.2.28
├── @fortawesome/free-brands-svg-icons@5.13.0
├── @fortawesome/free-solid-svg-icons@5.13.0
├── @fortawesome/pro-regular-svg-icons@5.13.0
├── @fortawesome/react-fontawesome@0.1.9
├── @tailwindcss/custom-forms@0.2.1
├── gatsby@2.20.8
├── gatsby-image@2.3.1
├── gatsby-plugin-manifest@2.3.3
├── gatsby-plugin-offline@3.1.2
├── gatsby-plugin-postcss@2.2.1
├── gatsby-plugin-react-helmet@3.2.1
├── gatsby-plugin-sharp@2.5.3
├── gatsby-source-filesystem@2.2.2
├── gatsby-source-graphql@2.2.1
├── gatsby-transformer-sharp@2.4.3
├── prettier@2.0.2
├── prop-types@15.7.2
├── react@16.13.1
├── react-dom@16.13.1
├── react-headroom@3.0.0
├── react-helmet@5.2.1
├── tailwindcss@1.2.0
└── uuid@7.0.2

Configuration of plugin in gatsy-config.js:

{
      resolve: `gatsby-source-graphql`,
      options: {
        typeName: 'Book',
        fieldName: 'catalogue',
        url: 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql',
        headers: {
          'x-api-key': 'xxxxxx'
        }
      }
    }

Expected result

Previously, the plugin would run without issue and create the source nodes successfully

Actual result

When the plugin is initialized, it throws the error above.

Environment

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 10.19.0 - /usr/local/opt/node@10/bin/node
    npm: 6.13.4 - /usr/local/opt/node@10/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 80.0.3987.149
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.20.8 => 2.20.8 
    gatsby-image: ^2.3.1 => 2.3.1 
    gatsby-plugin-manifest: ^2.3.3 => 2.3.3 
    gatsby-plugin-offline: ^3.1.2 => 3.1.2 
    gatsby-plugin-postcss: ^2.2.1 => 2.2.1 
    gatsby-plugin-react-helmet: ^3.2.1 => 3.2.1 
    gatsby-plugin-sharp: ^2.5.3 => 2.5.3 
    gatsby-source-filesystem: ^2.2.2 => 2.2.2 
    gatsby-source-graphql: ^2.3.0 => 2.3.0 
    gatsby-transformer-sharp: ^2.4.3 => 2.4.3 
  npmGlobalPackages:
    gatsby-cli: 2.8.28

[vladar]

This sounds like a dependency issue. Please run npm ls graphql (in the project root) and post the output here. Also, have you tried removing node_modules and re-installing dependencies?

[stevebreault]

Here's the output of npm ls graphql:

├─┬ @aws-amplify/api@2.2.0
│ └── graphql@14.0.0
└─┬ gatsby@2.20.8
  └── graphql@14.6.0

It fails trying to build from source on CI/CD deployment where no node_modules folder yet exists since it's pulling directly from the git repo.

I tried to rebuild from an empty hello-world starter and hit the same issue.

[vladar]

The problem is that @aws-amplify/api uses a specific version of graphql package (14.0.0). So it is incompatible with any package that requires another version of graphql. Gatsby requires graphql@^14.6.0.

Ideally @aws-amplify/api should upgrade dependencies. Until then you will probably have to use resolutions feature of yarn to workaround this problem.

Version ^14.6.0 should be directly compatible with 14.0.0.

[stevebreault]

I previously tried the resolutions route as well. Unfortunately, it doesn't fully address the problem as it causes downstream errors that still prevent the build from working.

[vladar]

Can you elaborate a bit? What kind of errors? Because the proper fix is to have a single copy of graphql for the whole project and that's exactly what resolutions are supposed to do.

Technically this error is emitted by graphql itself here, not Gatsby. So we can't do much about it in Gatsby.

[stevebreault]

The errors I get afterwards are AWS Amplify specific schema errors. And since, as you mention, the error is really GraphQL-centric and the fact that there's not much that can be done in Gatsby, I have to pick between either Gatsby working or the Amplify API. I'm pretty much resigned to having Gatsby work as designed and changing how I connect to my AWS GraphQL endpoints.

[ohlr]

I get the same error whith the following npm ls graphql

├─┬ gatsby@2.20.36
│ ├─┬ gatsby-cli@2.11.22
│ │ └─┬ gatsby-recipes@0.0.19
│ │   └── graphql@14.6.0  deduped
│ └── graphql@14.6.0 
└─┬ gatsby-source-prismic-graphql@3.5.0
  ├─┬ gatsby-source-graphql@2.4.3
  │ └── graphql@14.6.0  deduped
  └─┬ gatsby-source-graphql-universal@3.1.11
    └─┬ @types/graphql@14.5.0
      └── graphql@15.0.

resolved it with https://github.com/birkir/gatsby-source-graphql-universal/issues/14

[vladar]

Thanks for opening this issue! As stated, this is slightly tangential to Gatsby, and it seems like we’ve provided enough information to make an informed decision.

If this is not the case, or if we can help further — please don’t hesitate to reach out or comment on this issue, and we’d love to take another look.

Thanks for using Gatsby :muscle:

[oliviermtl]

I solved this issue by adding

"resolutions": {
    "graphql": "14.6.0"
 }

to my package.json

[jaredh159]

If you're using npm 8.3.x or higher, you can now use:

"overrides": {
    "graphql": "14.6.0"
 }

...since npm doesn't support resolutions