Multiple versions of graphql

[laradevitt]

Problem

I'm not sure how this came up, I started getting the error below on my projects that depend on gatsby-source-prismic-graphql.

 ERROR #11321  PLUGIN

"gatsby-source-prismic-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.

  78 |       if (!sdl) {
  79 |         introspectionSchema = yield introspectSchema(link);
> 80 |         sdl = printSchema(introspectionSchema);
     |               ^
  81 |       } else {
  82 |         introspectionSchema = buildSchema(sdl);
  83 |       }

File: ..\..\node_modules\gatsby-source-graphql-universal\gatsby-node.js:80:15

This indicates multiple versions of graphql which is obviously not allowed.

A couple of other issues posted in the last few days:

birkir/gatsby-source-prismic-graphql#176
gatsbyjs/gatsby#22645

Output of yarn why graphql:

$ yarn why graphql
yarn why v1.22.4
[1/4] Why do we have the module "graphql"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "graphql"
info Reasons this module exists
   - "workspace-aggregator-b6900ab3-b030-4197-a37e-fa5763949305" depends on it
   - Hoisted from "_project_#gatsby-theme-prismic-blog#gatsby#graphql"
   - Hoisted from "_project_#gatsby-theme-prismic-core#gatsby-source-prismic-graphql#gatsby-source-graphql#graphql"
info Disk size without dependencies: "3.06MB"
info Disk size with unique dependencies: "3.16MB"
info Disk size with transitive dependencies: "3.16MB"
info Number of shared dependencies: 1
=> Found "gatsby-source-graphql-universal#[email protected]"
info This module exists because "_project_#gatsby-theme-prismic-core#gatsby-source-prismic-graphql#gatsby-source-graphql-universal" depends on it.
info Disk size without dependencies: "3.18MB"
info Disk size with unique dependencies: "3.18MB"
info Disk size with transitive dependencies: "3.18MB"
info Number of shared dependencies: 0
=> Found "@types/graphql#[email protected]"
info This module exists because "_project_#gatsby-theme-prismic-core#gatsby-source-prismic-graphql#gatsby-source-graphql-universal#@types#graphql" depends on it.
info Disk size without dependencies: "3.18MB"
info Disk size with unique dependencies: "3.18MB"
info Disk size with transitive dependencies: "3.18MB"
info Number of shared dependencies: 0
Done in 1.19s.

Looking at the source for the latest version of this package (3.1.11) in node_modules/ (which, weirdly, doesn't appear to be in sync with this repo), the given version for graphql is "*" which seems wrong?

Workaround

My workaround is to delete node_modules/ and yarn.lock, then add a resolution to package.json in the project root (or workspaces root if that is your set-up):

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

Then reinstall with yarn.

Thanks -

Edit: Expanding on workaround.

[lqze]

I am also getting this issue.
From my package.json

"dependencies": {
    "babel-plugin-styled-components": "^1.10.7",
    "gatsby": "^2.19.25",
    "gatsby-background-image": "^1.0.1",
    "gatsby-cli": "^2.11.5",
    "gatsby-image": "^2.3.1",
    "gatsby-plugin-google-analytics": "^2.2.2",
    "gatsby-plugin-manifest": "^2.3.3",
    "gatsby-plugin-netlify": "^2.2.1",
    "gatsby-plugin-offline": "^3.1.2",
    "gatsby-plugin-react-helmet": "^3.2.1",
    "gatsby-plugin-sass": "^2.2.1",
    "gatsby-plugin-sharp": "^2.5.4",
    "gatsby-plugin-sitemap": "^2.3.1",
    "gatsby-plugin-styled-components": "^3.2.1",
    "gatsby-source-filesystem": "^2.2.2",
    "gatsby-source-graphql": "^2.3.1",
    "gatsby-source-prismic-graphql": "^3.4.0-beta.2",
    "gatsby-transformer-sharp": "^2.4.4",
    "intersection-observer": "^0.7.0",
    "moment": "^2.24.0",
    "node-sass": "^4.13.1",
    "outdated": "^0.1.1",
    "prismic-reactjs": "^1.3.0",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^5.2.1",
    "react-intersection-observer": "^8.25.2",
    "react-spring": "^8.0.27",
    "styled-components": "^5.0.1"
  },

[laradevitt]

Did you try the workaround?

[lqze]

@laradevitt Sorry, I forgot to mention that. Yes, used workaround and fixed the issue.

[lqze]

I've also realised you've put this issue under the gatsby-source-graphql-universal repo, not under gatsby-source-prismic-graphql. Should this be moved?

[laradevitt]

@lqze

Yes, used workaround and fixed the issue.

Ah, glad that worked for you.

Should this be moved?

I can see how it might be confusing but indeed this is the correct project. The problematic dependency on graphql lies with gatsby-source-graphql-universal (this project), which is a dependency of gatsby-source-prismic-graphql.

[elias-thok]

The same issue happens when using PNPM.

I assume this is because of the multiple versions of graphql that are potentially stored in the global node_modules folder.

The workaround didn't solve the issue, same as before. Reverting back to npm for now.

[laradevitt]

@elias-thok Hi there. You need to delete node_modules/ and yarn.lock and install again. I'll note that in the main post. And yes, it doesn't seem to be exclusive to this module.

[elias-thok]

@laradevitt Since I was using PNPM there is no yarn.lock but a pnpm-lock.json.

Unfortunately deleting node_modules & pnpm-lock.json did not solve the issue.
I suspect this is because PNPM uses symlinks to a shared node_modules directory where, by design, there will possibly be several graphql packages from other projects.

But npm is fine for now :-)

[laradevitt]

@elias-thok - Of course that makes sense. Sorry, not familiar with pnpm!

[blicker]

Just want to add a note on how I solved this issue. I did the workaround but it did not work until I also ran npm dedupe. Does this make sense?