Unable to find template plugin matching 'typescript-operations'

[hect1c]

Hey,

At some point in my project while upgrading some packages I started getting this issue with my @graphql-codgen. I've looked around and found some similar issues:

• Unable to find template plugin matching typescript-operations #2043
• Unable to find template plugin matching 'typescript-operations' #3769

I've tried all of the recommended solutions and still get the same error, the main thing is I can't reproduce it in another repo. It works fine when I create a new one but in my current project I get the following error

  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate src/__generated__/types
.d.tsx
      ✔ Load GraphQL schemas
      ✔ Load GraphQL documents
      ✖ Generate
        → Unable to find template plug
…


 Found 1 error

  ✖ src/__generated__/types.d.tsx
    Unable to find template plugin mat
ching 'typescript-operations'
    Install one of the following packa
ges:


    - @graphql-codegen/typescript-oper
ations
    - @graphql-codegen/typescript-oper
ations-template
    - @graphql-codegen/typescript-oper
ations-plugin
    - graphql-codegen-typescript-opera
tions
    - graphql-codegen-typescript-opera
tions-template
    - graphql-codegen-typescript-opera
tions-plugin
    - codegen-typescript-operations
    - codegen-typescript-operations-te
mplate
    - typescript-operations
    Error: Unable to find template plu
gin matching typescript-operations
        at getPluginByName (/Users/har
tley/Sites/web-ui/node_modules/@graphq
l-codegen/cli/bin.js:369:11)
        at async Promise.all (index 1)
        at async 
/Users/hartley/Sites/web-ui/node_modul
es/@graphql-codegen/cli/bin.js:956:60
        at async Task.task (/Users/har
tley/Sites/web-ui/node_modules/@graphq
l-codegen/cli/bin.js:789:17)
    Error: Unable to find template plu
gin matching typescript-operations
        at getPluginByName (/Users/har
tley/Sites/web-ui/node_modules/@graphq
l-codegen/cli/bin.js:369:11)
        at async Promise.all (index 1)
        at async 
/Users/hartley/Sites/web-ui/node_modul
es/@graphql-codegen/cli/bin.js:956:60
        at async Task.task (/Users/har
tley/Sites/web-ui/node_modules/@graphq
l-codegen/cli/bin.js:789:17)

Here is a shortened version of my package file

{
  "sideEffects": false,
  "license": "MIT",
  "scripts": {
    "codegen": "graphql-codegen --overwrite -r dotenv-flow/config -- --node-env=$BUILD_ENV --dotenv-flow-path=config/",
    "codegen-watch": "graphql-codegen --watch --overwrite -r dotenv-flow/config -- --node-env=$BUILD_ENV --dotenv-flow-path=config/",
    "dev": "NODE_OPTIONS='--max-http-header-size=30000 --max-old-space-size=8192' node --inspect ./node_modules/.bin/next dev",
    "ngrok": "ngrok http 3000",
    "prebuild": "npm run codegen",
    "build": "next build",
    "start": "NODE_OPTIONS='--max-http-header-size=30000' next start -H 127.0.0.1 -p $PORT",
    "test": "run-s test:unit test:e2e:exec",
    "test:ci:chrome": "run-s test:e2e:exec-ci:chrome",
    "test:ci:firefox": "run-s test:e2e:exec-ci:firefox",
    "test:ci:edge": "run-s test:e2e:exec-ci:edge",
    "test:unit": "jest",
    "test:unit:watch": "jest --watch",
    "test:unit:coverage": "jest --coverage",
    "test:e2e": "cypress open --browser chrome",
    "test:e2e:spec": "cypress run --spec",
    "test:e2e:exec": "cypress run --headless",
    "test:e2e:exec-ci:chrome": "$(npm bin)/knapsack-pro-cypress --browser chrome --headless --reporter mochawesome --reporter-options reportDir=mochawesome-report,overwrite=false,html=false,json=true",
    "test:e2e:exec-ci:firefox": "$(npm bin)/knapsack-pro-cypress run --browser firefox --headless --reporter mochawesome --reporter-options reportDir=mochawesome-report,overwrite=false,html=false,json=true",
    "test:e2e:exec-ci:edge": "$(npm bin)/knapsack-pro-cypress run --browser edge --headless --reporter mochawesome --reporter-options reportDir=mochawesome-report,overwrite=false,html=false,json=true",
    "tsc": "tsc",
    "cy:verify": "$(npm bin)/cypress verify",
    "cy:info": "$(npm bin)/cypress info",
    "next:lint": "next lint",
    "lint": "`npm bin`/eslint ./",
    "lint:fix": "eslint --fix \"!(*test|*setup|*config).{js,ts,tsx}\"",
    "format": "prettier --write",
    "analyze": "cross-env ANALYZE_BUNDLE=true next build",
    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
    "clean": "npx rimraf .next out src/__generated__/* src/**/__generated__",
  },
  "lint-staged": {
    "!(*test|*setup|*config).{js,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  },
  "dependencies": {
    "@apollo/client": "^3.4.10",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@formatjs/cli": "^4.2.33",
    "@formatjs/intl-datetimeformat": "^4.2.3",
    "@formatjs/intl-getcanonicallocales": "^1.7.3",
    "@formatjs/intl-numberformat": "^7.2.3",
    "@formatjs/intl-pluralrules": "^4.1.3",
    "@formatjs/intl-relativetimeformat": "^9.2.3",
    "@next/bundle-analyzer": "^10.0.3",
    "@popperjs/core": "^2.1.1",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-pdf/renderer": "1.6.16",
    "@sentry/nextjs": "^6.12.0",
    "@tippyjs/react": "^4.2.5",
    "apollo-upload-client": "^13.0.0",
    "axios": "^0.21.0",
    "cookies": "^0.8.0",
    "crypto-hash": "^1.3.0",
    "d3": "^6.7.0",
    "date-fns": "^2.0.0-beta.5",
    "dayjs": "^1.10.3",
    "deepmerge": "^4.2.2",
    "dompurify": "^2.3.0",
    "dotenv-flow": "^3.1.0",
    "draft-js": "^0.11.4",
    "exceljs": "^4.2.0",
    "file-saver": "^2.0.5",
    "graphql": "^15.5.2",
    "graphql-tag": "^2.10.1",
    "isomorphic-unfetch": "^3.1.0",
    "js-file-download": "^0.4.12",
    "jszip": "^3.5.0",
    "lodash": "^4.17.20",
    "next": "^11.1.2",
    "next-compose-plugins": "^2.2.1",
    "next-cookies": "^2.0.3",
    "nprogress": "^0.2.0",
    "otplib": "^12.0.1",
    "postal-codes-js": "^2.5.2",
    "qrcode.react": "^1.0.1",
    "query-string": "^6.13.8",
    "react": "^17.0.2",
    "react-animate-height": "^2.0.20",
    "react-beautiful-dnd": "^13.0.0",
    "react-bootstrap": "^1.6.1",
    "react-color": "^2.18.0",
    "react-d3-speedometer": "^1.0.1",
    "react-datepicker": "^3.8.0",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.3.2",
    "react-gtm-module": "^2.0.11",
    "react-hook-form": "^5.7.2",
    "react-intl": "^5.20.10",
    "react-modal": "^3.11.2",
    "react-papaparse": "^3.17.1",
    "react-pdf-html": "^1.1.0",
    "react-phone-input-2": "^2.13.9",
    "react-player": "^2.8.2",
    "react-rnd": "^10.3.4",
    "react-router-dom": "^5.1.2",
    "react-select": "^4.3.1",
    "react-table": "^7.0.0-rc.16",
    "redraft": "^0.10.2",
    "sharp": "^0.29.0",
    "tippy.js": "^6.2.3",
    "uuid": "^8.3.2",
    "yup": "^0.28.1"
  },
  "devDependencies": {
    "@bahmutov/print-env": "^2.1.1",
    "@commitlint/cli": "^8.3.5",
    "@commitlint/config-conventional": "^8.3.4",
    "@cypress/browserify-preprocessor": "^3.0.1",
    "@cypress/code-coverage": "^3.9.2",
    "@emotion/babel-plugin": "^11.3.0",
    "@emotion/eslint-plugin": "^11.2.0",
    "@formatjs/intl": "^1.9.6",
    "@graphql-codegen/cli": "2.1.1",
    "@graphql-codegen/fragment-matcher": "3.1.0",
    "@graphql-codegen/introspection": "2.1.0",
    "@graphql-codegen/near-operation-file-preset": "^2.1.3",
    "@graphql-codegen/plugin-helpers": "^2.1.1",
    "@graphql-codegen/typescript": "2.2.0",
    "@graphql-codegen/typescript-operations": "2.1.3",
    "@graphql-codegen/typescript-react-apollo": "3.1.3",
    "@knapsack-pro/cypress": "^4.4.0",
    "@next/eslint-plugin-next": "^10.0.3",
    "@semantic-release/changelog": "^5.0.0",
    "@semantic-release/commit-analyzer": "^8.0.1",
    "@semantic-release/git": "^9.0.0",
    "@semantic-release/gitlab": "^6.0.2",
    "@semantic-release/release-notes-generator": "^9.0.1",
    "@sentry/types": "^6.11.0",
    "@svgr/webpack": "^5.5.0",
    "@testing-library/react": "^10.0.4",
    "@types/chai": "^4.2.15",
    "@types/d3": "^7.0.0",
    "@types/enzyme": "^3.10.4",
    "@types/enzyme-adapter-react-16": "^1.0.5",
    "@types/faker": "^5.1.7",
    "@types/file-saver": "^2.0.1",
    "@types/jest": "^24.9.0",
    "@types/lodash": "^4.14.157",
    "@types/node": "^14.17.14",
    "@types/react": "^16.14.14",
    "@types/react-datepicker": "^3.1.8",
    "@types/react-dom": "^17.0.9",
    "@typescript-eslint/eslint-plugin": "^4.30.0",
    "@typescript-eslint/parser": "^4.30.0",
    "@welldone-software/why-did-you-render": "^6.2.1",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-import-graphql": "^2.7.0",
    "babel-plugin-istanbul": "^6.0.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-preset-env": "^1.7.0",
    "bulma": "^0.8.0",
    "chai-subset": "^1.6.0",
    "cross-env": "^7.0.3",
    "cypress": "^8.2.0",
    "cypress-cucumber-preprocessor": "^4.0.3",
    "cypress-dotenv-flow": "^1.2.2",
    "cypress-failed-log": "^2.9.1",
    "cypress-file-upload": "^5.0.8",
    "cypress-localstorage-commands": "^1.4.1",
    "cypress-plugin-snapshots": "^1.4.3",
    "cypress-real-events": "^1.5.1",
    "cypress-terminal-report": "^3.0.3",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.4.3",
    "eslint": "^7.30.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript-prettier": "^4.2.0",
    "eslint-config-next": "^11.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-babel-module": "^5.3.1",
    "eslint-plugin-cypress": "^2.11.3",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "faker": "^5.5.3",
    "husky": "^7.0.2",
    "jest": "^26.6.3",
    "jest-watch-typeahead": "^0.4.2",
    "lint-staged": "^10.2.3",
    "mochawesome": "^6.2.2",
    "mutationobserver-shim": "^0.3.5",
    "next-unused": "^0.0.6",
    "ngrok": "^3.2.7",
    "npm-run-all": "^4.1.5",
    "prettier": "^1.19.1",
    "randexp": "^0.5.3",
    "semantic-release-slack-bot": "^2.1.0",
    "serverless-plugin-elastic-beanstalk": "^1.5.1",
    "ts-jest": "^26.5.2",
    "tslib": "^2.3.1",
    "tslint": "^6.1.3",
    "tslint-config-airbnb": "^5.11.2",
    "tslint-react-hooks": "^2.2.1",
    "typescript": "^4.4.2",
    "webpack": "^4.43.0"
  }
}

Following is my codegen.yml file

schema: ${GRAPHQL_API_URL}
generates:
  src/__generated__/types.d.tsx:
    documents: 'src/modules/core/graphql/**/*.graphql'
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
  src/:
    documents:
      - 'src/!(pages)/**/!(graphql)/**/!(__{tests,generated}__)/!(*.{d,test,generated}).{ts,tsx,graphql}'
      - 'src/layouts/**/*.graphql'
    preset: near-operation-file
    presetConfig:
      folder: __generated__
      extension: .tsx
      baseTypesPath: __generated__/types.d.tsx
    config:
      namingConvention: keep
      nonOptionalTypename: true
      dedupeOperationSuffix: true
    plugins:
      - "typescript-operations"
      - "typescript-react-apollo"
  src/modules/core/graphql/fragment-matcher.ts:
    plugins:
      - "fragment-matcher"
  src/modules/core/graphql/schema.json:
    plugins:
      - "introspection"

I wish I had a repo with the issue to provide to you but unfortunately I don't as I can't reproduce it in a fresh repo. Here are the steps I took to try and solve this:

1. npm ci - ✖
2. rm -rf node_modules && npm i - ✖
3. reinstall @graphql-codegen packages - ✖
4. set all possible @graphql-coden packages to same versions - ✖
5. delete node_modules + package-lock.json file - ✖
6. npm uninstall @graphql-codegen packages and then install - ✖
7. remove all plugins and just leave - typescript in my codegen.yml file - ✖ (Note: this one in particular introduced a different error saying my Custom plugin 'typescript' does not exist.)
8. Delete codegen.yml and run graphql-codegen init and go through wizard to setup file - ✖
9. Checked node_modules/@graphql-codegen and I can see all of the plugins installed - ✖

I just can't seem to figure out how to solve this when it should really be an easy fix and definitely something wrong with my configurations or packages. Could really use another set of eyes on this as maybe I'm missing something small. What gets me even more is in a new clean install repo this works fine.

Thanks

[dotansimha]

If possible, try to create a reproduction. Otherwise, we are not going to be able to test and fix this.

[hect1c]

Hey, yea I figured as much thanks for the reply, but I was able to get through this issue actually.

I'm not sure what was the exact root cause, most likely something was wrong with my package-lock.json file even though I would delete it and reinstall, however since I was able to create a fresh clean repo with my package.json file that worked and had no issues, I just copied the package-lock.json file from that project to my existing one and this seemed to have magically resolved everything.

I can't say that is a good solution, nor do I know why exactly this happened but in doing so all installs, reinstalls and code generations worked perfectly afterwards. I suspect maybe there must have been some sort of cache hanging around somewhere that would cause my lock file to have missing dependencies even if I delete and reinstalled everything from within the same project? (maybe .git ?). Anyway all good.

Thanks for the feedback and taking the time to read it. Great package, keep up the good work!

[singhtalwin]

For anyone else having this issue, deleting the package-lock.json and node_modules folder and regenerating the package-lock.json file fixes the issues. There's probably some nested dependency that is conflicting, but I wasn't able to narrow it down to the exact package.

[singhtalwin]

Installing @babel/runtime as a devDependency fixed it for me. npm i -D @babel/runtime

[AnaisRevellat]

This post is old but today in July 2023, some of the most recent dependencies has some conflicts, so instead of using the most recent version, in my dev dependencies I get these versions to work ang to generate the typing:

"devDependencies": {
"@graphql-codegen/cli": "^2.13.7",
"@graphql-codegen/typescript": "^2.8.0",
"@graphql-codegen/typescript-resolvers": "^2.7.5"
}

indeed version "@graphql-codegen/cli": "^4.0.1" etc did not work properly for me.