Playground with facebooks create-react-app fails to compile

[gpotzkov]

This issue pertains to the following package(s):

• GraphQL Playground - Electron App
• GraphQL Playground HTML
• 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?

OSX

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

"graphql-playground-react": "^1.7.0",

What is the expected behavior?

Working local playground react client

What is the actual behavior?

Module not found: Can't resolve 'graphql/validation/rules/ExecutableDefinitions'
graphql/graphql-language-service#239

What steps may we take to reproduce the behavior?

Create react app with https://github.com/facebook/create-react-app and follow your own Playground React instructions

Please provide a gif or image of the issue for a quicker response/fix.

[mikkmartin]

having the same problem bootstrapping with next.js

[TravisBernard]

This is related to what seems to be an accidental BC break in the Graphql library. Followed the instructions in this issue over on the graphiql project, namely yarn add graphql@0.13.2 and ignore the dependency warnings and it fixed for me.

[tizmagik]

I just hit this today with a fresh create-react-app --typescript app:

"dependencies": {
    "graphql-playground-react": "^1.7.20",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-scripts": "3.2.0",
    "typescript": "3.7.2"
  },

import React from "react";
import { Provider } from "react-redux";
import { Playground, store } from "graphql-playground-react";

const App: React.FC = () => (
  <Provider store={store}>
    <Playground endpoint="https://api.graph.cool/simple/v1/swapi" />
  </Provider>
);

[tizmagik]

If you npm i graphql as a direct dependency (which pulled down graphql@14.5.8 as of this writing) it gets you around the error and the app seems to work. However, the following console error appears when running the app:

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 (:3000/static/js/0.chunk.js:84859)
    at isSchema (:3000/static/js/0.chunk.js:91596)
    at assertSchema (:3000/static/js/0.chunk.js:91599)
    at validateSchema (:3000/static/js/0.chunk.js:91914)
    at assertValidSchema (:3000/static/js/0.chunk.js:91937)
    at validate (:3000/static/js/0.chunk.js:100267)
    at validateWithCustomRules (:3000/static/js/0.chunk.js:47626)
    at validateQuery (:3000/static/js/0.chunk.js:46011)
    at getDiagnostics (:3000/static/js/0.chunk.js:45999)
    at :3000/static/js/0.chunk.js:6039
    at startLinting (:3000/static/js/0.chunk.js:9937)
    at :3000/static/js/0.chunk.js:9985

[andywangsk]

Had the same issue @tizmagik