Duplicate "graphql" modules cannot be used at the same time - graphql

Question

Good morning/afternoon stackoverflow. I'm using an npm package called #graphql-codegen/cli to generate type definitions/utilites for my GraphQL schema. Recently, I've been encountering an error each time I try to run graphql-codegen command/script. This is the error that I get
"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."
...
"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."
I'm fairly certain this issue is with my environment, not my project. I attempted to create a brand new project from scratch and still received the same error. Here are the things I've tried
Reinstalling node_modules
Using the resolutions property in package.json
Using different versions of the graphql/graphql-cli packages
Completely wiping out my global npm packages
I've spent the last couple of days attempting to resolve this error, but I'm all out of ideas. Any thoughts or recommendations are much appreciated. Also, below is a link to a codesandbox that contains the relevant files
https://codesandbox.io/s/graphql-codegen-cli-example-qq5cj

Answer 1

I had the same problem with codegen.
src/generated/graphql.tsx
Error: Cannot use GraphQLObjectType "FieldError" 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.
running codegen.yml
overwrite: true
schema: "http://localhost:4001/graphql"
documents: "src/graphql/**/*.graphql"
generates:
src/generated/graphql.tsx:
plugins:
- "typescript"
- "typescript-operations"
- "typescript-urql"
I think i had conflicting packages. Removing "urql", which i think caused the problem, and reinstalling it solved the error.
yarn run v1.22.17
$ graphql-codegen --config codegen.yml
√ Parse configuration
√ Generate outputs
with package.json
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"gen": "graphql-codegen --config codegen.yml"
},
"dependencies": {
"#chakra-ui/icons": "^1.0.0",
"#chakra-ui/react": "^1.8.5",
"#emotion/react": "^11.0.0",
"#emotion/styled": "^11.0.0",
"formik": "^2.2.9",
"framer-motion": "^4.0.3",
"next": "latest",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"graphql": "^16.3.0",
"urql": "^2.2.0"
},
"devDependencies": {
"#graphql-codegen/cli": "^2.6.2",
"#graphql-codegen/typescript": "2.4.5",
"#graphql-codegen/typescript-operations": "2.3.2",
"#graphql-codegen/typescript-urql": "^3.5.3",
"#graphql-codegen/urql-introspection": "^2.1.1",
"#types/node": "^17.0.21",
"graphql-tag": "^2.12.6",
"typescript": "^4.5.5"
}
}
You can edit your package.json as needed. Delete the file 'yarn.lock', 'package-lock.json' and the folder 'node_modules' to clear your dependencies. And run 'npm install' / 'yarn install' to reinstall your dependencies.
Have fun!