Graphql-playground: Playground with facebooks create-react-app fails to compile

Created on 22 Jun 2018 · 5Comments · Source: graphql/graphql-playground

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?

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'
https://github.com/graphql/graphql-language-service/issues/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._
client____documents_workspace_emundo_crepo-graphql_client__-_____package_json__client_

Source

gpotzkov

👍6

Most helpful comment

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 on 24 Nov 2019

👍3

All 5 comments

having the same problem bootstrapping with next.js

mikkmartin on 18 Jul 2018

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 [email protected] and ignore the dependency warnings and it fixed for me.

TravisBernard on 22 Aug 2018

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 on 24 Nov 2019

👍3

If you npm i graphql as a direct dependency (which pulled down [email protected] 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

tizmagik on 25 Nov 2019

👍1

Had the same issue @tizmagik