Multiple TypeScript errors when using @apollo/client

[Xapu1337]

Intended outcome:
Use Apollo Client with NextJS in NestJS to query Apollo via ApolloProvider and useQuery

Actual outcome:
Compiles into multiple errors and doesn't start the website
and the console returns the following:

[10:30:25] Starting compilation in watch mode...

node_modules/@apollo/federation/dist/composition/DirectiveMetadata.d.ts:1:206 - error TS2724: '"graphql"' has no exported member named 'VisitFn'. Did you mean 'visit'?

1 import { ASTNode, DirectiveNode, GraphQLSchema, InterfaceTypeDefinitionNode, InterfaceTypeExtensionNode, ObjectTypeDefinitionNode, ObjectTypeExtensionNode, UnionTypeDefinitionNode, UnionTypeExtensionNode, VisitFn } from 'graphql';
                                                                                                                                                                                                               ~~~~~~~

node_modules/@apollo/query-planner/dist/composedSchema/metadata.d.ts:10:15 - error TS2428: All declarations of 'GraphQLFieldExtensions' must have identical type parameters.

10     interface GraphQLFieldExtensions<_TSource, _TContext, _TArgs = {
                 ~~~~~~~~~~~~~~~~~~~~~~

node_modules/@graphql-tools/utils/Interfaces.d.ts:3:18 - error TS2430: Interface 'ExecutionResult<TData>' incorrectly extends interface 'ExecutionResult<ObjMap<unknown>, ObjMap<unknown>>'.
  Types of property 'data' are incompatible.
    Type 'TData' is not assignable to type 'ObjMap<unknown>'.

3 export interface ExecutionResult<TData = Record<string, any>> extends GraphQLExecutionResult {
                   ~~~~~~~~~~~~~~~

node_modules/graphql/type/definition.d.ts:520:18 - error TS2428: All declarations of 'GraphQLFieldExtensions' must have identical type parameters.     

520 export interface GraphQLFieldExtensions<_TSource, _TContext, _TArgs = any> {
                     ~~~~~~~~~~~~~~~~~~~~~~

[10:30:30] Found 4 errors. Watching for file changes.

How to reproduce the issue:
I don't have something special that might cause that, I just used and the error occoured in NextJS.
Maybe it's a tsconfig issue?

{
  "extends": "../../tsconfig.paths.json",
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    ".next",
    "server/**/*.*"
  ]
}

Versions
System:
OS: Windows 10 10.0.22000
Binaries:
Node: 16.13.2 - ~\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
Yarn: 1.22.17 - ~\scoop\apps\yarn\current\bin\yarn.CMD
npm: 8.1.2 - ~\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (98.0.1108.50)
npmPackages:
@apollo/client: ^3.5.8 => 3.5.8
@apollo/gateway: ^0.46.0 => 0.46.0
apollo-server-express: ^3.6.2 => 3.6.2

[danielkbx]

I've got similar error when running tsc 4.6.2 with my nextjs project using apollo-server. I tried older versions of typescript but this did not help.
Something must be wrong with the types.

[danielkbx]

I had two different versions of @apollo/query-planner (something yarn does but npm not). Resolving this solved the issue.

[bignimbus]

Hi all 👋🏻 thanks for your patience! Looking at the stack trace it appears that this is due to having multiple versions of the same library in your project. @danielkbx's response appears to corroborate this. I'll close this issue but please do feel free to let us know if you feel that there's something actionable here for the team to address 🙏🏻