Attempted Import errors when migrating to Apollo 3.x

[in15]

Intended outcome:
Migrating from @apollo/react-hooks and other packages to @apollo/client (3.4.7). After following migration guide, my intent was for things to work.

Actual outcome:
Followed the migration guide.
Have graphql 14.7.0 included in my package
node_modules is populated as expected.

When running the dev server, I see the following:

project: ./node_modules/@apollo/client/core/LocalState.js
project: Attempted import error: 'BREAK' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/globals/graphql.js
project: Attempted import error: 'isType' is not exported from 'graphql'.
project: ./node_modules/graphql-tag/lib/index.js
project: Attempted import error: 'parse' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/link/http/selectHttpOptionsAndBody.js
project: Attempted import error: 'print' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/link/http/createHttpLink.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/directives.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/core/LocalState.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: Search for the keywords to learn more about each warning.
project: To ignore, add // eslint-disable-next-line to the line before.

When inspecting my local node_modules, I see that visit and BREAK are exported by the graphql package.

How to reproduce the issue:

Versions
3.4.7
and attempted 3.3.20

[benjamn]

@in15 Have you tried upgrading the graphql package? The latest version is 15.5.1.

[in15]

Hi @benjamn - good suggestion. I upgraded graphql to the latest version, 15.5.1, and re-attempted. Same issues, unfortunately.

project: ./node_modules/@apollo/client/core/LocalState.js
project: Attempted import error: 'BREAK' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/globals/graphql.js
project: Attempted import error: 'isType' is not exported from 'graphql'.
project: ./node_modules/graphql-tag/lib/index.js
project: Attempted import error: 'parse' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/link/http/selectHttpOptionsAndBody.js
project: Attempted import error: 'print' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/transform.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/utilities/graphql/directives.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/core/LocalState.js
project: Attempted import error: 'visit' is not exported from 'graphql'.
project: ./node_modules/@apollo/client/link/http/createHttpLink.js
project: Attempted import error: 'visit' is not exported from 'graphql'.

[dylanwulf]

@benjamn many people are stuck on graphql v14 because the apollo cli isn't compatible with v15: apollographql/apollo-tooling#2232

[thomastvedt]

Related?:
https://stackoverflow.com/questions/68822773/typeerror-graphql-istype-is-not-a-function

I got this when upgrading from Apollo client 3.3.21 to 3.4.9. My graphql verison is 15.5.1.
I'm not using apollo CLI, only apollo client.

[in15]

@benjamn any ideas on what i can try next? i haven't been able to get past this

edit: I think I got it. #8178

It might be helpful to include this in the migration guide.

[emanuellarini]

For those who come here later having this issue
I'm using absolute path imports and I had a folder in src/ called graphql which made the entire confusion around the typing for the TS... renaming the folder made everything work as expected

You can set traceResolution: true in your tsconfig.json to better display the error :)