Duplicate graphql modules

[Powell-v2]

This issue pertains to the following package(s):

• [ ] GraphQL Playground - Electron App
• [ ] GraphQL Playground HTML
• [x] GraphQL Playground
• [ ] GraphQL Playground Express Middleware
• [ ] GraphQL Playground Hapi Middleware
• [ ] GraphQL Playground Koa Middleware
• [ ] GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

macOS Mojave v10.14.1

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

graphql-playground-react v1.7.9

What is the expected behavior?

There shouldn't be a clash of versions? I'm not really sure, maybe the problem is on my side.

What is the actual behavior?

I'm extending provided React component. Once I start typing a query, the following error appears in the console:

instanceOf.js?c967:11 Uncaught Error: Cannot use GraphQLSchema "[object Object]" 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.
    at instanceOf (instanceOf.js?c967:11)
    at isSchema (schema.js?099b:29)
    at validateSchema (validate.js?6bab:35)
    at assertValidSchema (validate.js?6bab:60)
    at validate (validate.js?02f2:43)
    at validateWithCustomRules (validateWithCustomRules.js?8a94:41)
    at validateQuery (getDiagnostics.js?d3b1:71)
    at getDiagnostics (getDiagnostics.js?d3b1:58)
    at eval (lint.js?3bcf:43)
    at startLinting (lint.js?8822:151)

What steps may we take to reproduce the behavior?

Please provide a gif or image of the issue for a quicker response/fix. Here is my dependency graph (generated by npm ls graphql), hopefully it helps:

├─┬ @purple/resolver@6.0.0
│ └── graphql@0.13.2
├─┬ graphql-playground-react@1.7.9
│ └── graphql@0.11.7
└─┬ serverless@1.26.1
  ├─┬ apollo-client@1.9.3
  │ ├─┬ apollo-link-core@0.5.4
  │ │ └── graphql@0.10.5
  │ └── graphql@0.10.5  deduped
  └── graphql@0.10.5

[huv1k]

You have multiple graphql versions you need to specify what to use. Playground is still using graphql 13. So inside package.json:

"resolutions": {
  "**/graphql": "0.13.0",
  "**/**/graphql": "0.13.0"
}

etc

[Powell-v2]

The thing is I’m not using yarn in the project ... Any advice on how to solve it with npm?

[huv1k]

I don't know for npm, but another solution is to play with rest packages and see get them to one graphql version, but that is really bad idea.

[Powell-v2]

Thanks!