TypeError: Cannot read properties of undefined (reading 'FIELD')

[jwhunt19]

Intended outcome:
Get apollo-client working on codesandbox.io react template

Actual outcome:
Receiving the following error when I attempt to initialize an ApolloClient instance in step 2 following this guide https://www.apollographql.com/docs/react/get-started/

Here is the code sandbox: https://codesandbox.io/s/naughty-wiles-ygmexk?file=/src/App.js

Here is the error:

`TypeError: Cannot read properties of undefined (reading 'FIELD')
at $csb$eval (https://qt7y3u.csb.app/node_modules/graphql/type/directives.mjs:66:50)

at H (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:99995)

at K.evaluate (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112747)

at ge.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:123129)

at c (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112362)

at $csb$eval (https://qt7y3u.csb.app/node_modules/graphql/type/validate.mjs:13:29)

at H (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:99995)

at K.evaluate (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112747)

at ge.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:123129)

at c (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112362)

at $csb$eval (https://qt7y3u.csb.app/node_modules/graphql/graphql.mjs:11:32)

at H (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:99995)

at K.evaluate (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112747)

at ge.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:123129)

at c (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112362)

at $csb$eval (https://qt7y3u.csb.app/node_modules/graphql/index.mjs:25:26)

at H (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:99995)

at K.evaluate (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112747)

at ge.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:123129)

at c (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112362)

at $csb$eval (https://qt7y3u.csb.app/node_modules/@apollo/client/utilities/globals/fix-graphql.js:8:21)

at H (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:99995)

at K.evaluate (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112747)

at ge.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:123129)

at c (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112362)

at $csb$eval (https://qt7y3u.csb.app/node_modules/@apollo/client/utilities/globals/index.js:30:29)

at H (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:99995)

at K.evaluate (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112747)

at ge.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:123129)

at c (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112362)

at $csb$eval (https://qt7y3u.csb.app/node_modules/@apollo/client/core/index.js:13:23)

at H (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:99995)

at K.evaluate (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112747)

at ge.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:123129)

at c (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112362)

at $csb$eval (https://qt7y3u.csb.app/node_modules/@apollo/client/index.js:5:28)

at H (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:99995)

at K.evaluate (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112747)

at ge.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:123129)

at c (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112362)

at $csb$eval (https://qt7y3u.csb.app/src/index.js:9:16)

at H (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:99995)

at K.evaluate (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:112747)

at ge.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:123129)

at ge.evaluateModule (https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:122628)

at https://codesandbox.io/static/js/sandbox.0af6ff135.js:1:318342

at c (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3629)

at Generator._invoke (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3382)

at Generator.forEach.t.<computed> [as next] (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3986)

at r (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:206)`

How to reproduce the issue:
go to codesandbox.io and create a new sandbox with their official react template and then follow the steps in this guide https://www.apollographql.com/docs/react/get-started/

Versions
cant find terminal to run supplied command, instead here is a screenshot

[alexandergottlieb]

This StackOverflow answer helped me: https://stackoverflow.com/a/71504548

[email protected] and @apollo/[email protected] are working for me.

[ashnewport]

I can replicate on CodeSandbox with [email protected] but not [email protected] so perhaps this is an issue with compatibility of libraries.
Depending on the version of graphql used, sometimes the error displays differently such as TypeError: Cannot read properties of undefined (reading 'QUERY')

[sleekyom]

I ran into the same issue and I was able to fix it by changing the react version used in the sandbox.

"@apollo/client": "3.6.2",
"graphql": "15.8.0",
"react": "17.0.2"
This dependencies version fix the issue for me

[jpvajda]

@StephenBarlow It sounds like we have dependency version issue on this particular code sandbox tutorial Could we update the sandbox package.json to more current versions of each package type?

[alessbell]

Just ran into this myself - narrowed it down to the graphql version: bumping to v16 or greater breaks things (all other dependencies are at latest).

[jpvajda]

@alessbell I'll follow up on this, thanks for confirming!

[alessbell]

The following message was added to our getting started docs last week:

If you're using a React sandbox from CodeSandbox and you encounter a TypeError, try downgrading the version of the graphql package to 15.8.0 in the Dependencies panel. If you encounter a different error after downgrading, refresh the page.

Going to close out this issue for now, thanks for reporting @jwhunt19!