babelOptimizerPlugin cause graphql-codegen to error out

[kaushalyap]

I followed instructions outlined here to minimize bundle size with babel plugin. But code generation give me following error

> graphql-codegen

✔ Parse Configuration
⚠ Generate outputs
  ❯ Generate to ./src/gql/
    ✔ Load GraphQL schemas
    ✔ Load GraphQL documents
    ✖
      Unable to find template plugin matching '0'
      Install one of the following packages:
      - @graphql-codegen/0
      - @graphql-codegen/0-template
      - @graphql-codegen/0-plugin
      - graphql-codegen-0
      - graphql-codegen-0-template
      - graphql-codegen-0-plugin
      - codegen-0
      - codegen-0-template
      - 0

I have following config

config.ts

import { CodegenConfig } from '@graphql-codegen/cli'
const { babelOptimizerPlugin } = require('@graphql-codegen/client-preset')

const config: CodegenConfig = {
  schema: 'http://localhost:8080/graphql',
  documents: ['src/**/*.tsx'],
  ignoreNoDocuments: true, // for better experience with the watcher
  generates: {
    './src/gql/': {
      preset: 'client',
      plugins: [
        // // @ts-ignore
        [
           babelOptimizerPlugin,
           { artifactDirectory: './src/gql', gqlTagName: 'graphql' },
        ],
      ],
    },
  },
  config: {
    skipTypename: true,
    dedupeFragments: true,
    avoidOptionals: true,
    useTypeImports: true,
  },
}

// eslint-disable-next-line no-restricted-exports
export default config

package.json listing installed packages

"dependencies": {
    "@apollo/client": "^3.7.2",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@fontsource/material-icons": "^4.5.4",
    "@hookform/resolvers": "^2.9.11",
    "@mui/icons-material": "^5.10.6",
    "@mui/material": "^5.10.5",
    "@mui/x-data-grid": "^5.17.3",
    "@mui/x-data-grid-generator": "^5.17.5",
    "@mui/x-date-pickers": "^5.0.2",
    "@sentry/nextjs": "^7.47.0",
    "@sentry/react": "^7.47.0",
    "@sentry/tracing": "^7.47.0",
    "chart.js": "^4.2.1",
    "dayjs": "^1.11.5",
    "graphql": "^16.6.0",
    "graphql-ws": "^5.11.2",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.25",
    "jwt-decode": "^3.1.2",
    "next": "13.1.6",
    "qrcode.react": "^3.1.0",
    "react": "18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.43.0",
    "react-html5-qrcode-reader": "^1.1.1",
    "react-to-print": "^2.14.10",
    "xlsx": "^0.18.5",
    "zustand": "^4.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@faker-js/faker": "^7.5.0",
    "@graphql-codegen/cli": "^2.16.4",
    "@graphql-codegen/client-preset": "^1.2.6",
    "@graphql-eslint/eslint-plugin": "^3.11.2",
    "@ls-lint/ls-lint": "^1.11.2",
    "@playwright/test": "^1.34.2",
    "@storybook/addon-a11y": "^7.0.0-beta.53",
    "@storybook/addon-actions": "^7.0.0-beta.53",
    "@storybook/addon-coverage": "^0.0.5",
    "@storybook/addon-essentials": "^7.0.0-beta.53",
    "@storybook/addon-interactions": "^7.0.0-beta.53",
    "@storybook/addon-links": "^7.0.0-beta.53",
    "@storybook/nextjs": "^7.0.0-beta.53",
    "@storybook/react": "^7.0.0-beta.53",
    "@storybook/testing-library": "^0.0.14-next.1",
    "@testing-library/react": "^13.4.0",
    "@types/node": "18.14.0",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.38.1",
    "@typescript-eslint/parser": "^5.38.1",
    "@vitejs/plugin-react": "^2.1.0",
    "babel-loader": "^8.2.5",
    "chromatic": "^6.11.4",
    "dotenv": "^16.0.3",
    "eslint": "8.34.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-next": "13.1.6",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-simple-import-sort": "^8.0.0",
    "eslint-plugin-storybook": "^0.6.6",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^8.0.2",
    "init": "^0.1.2",
    "lint-staged": "^13.0.3",
    "prettier": "^2.7.1",
    "pretty-quick": "^3.1.3",
    "serve": "^14.1.2",
    "storybook": "^7.0.0-beta.53",
    "ts-node": "^10.9.1",
    "tsconfig-paths-webpack-plugin": "^4.0.0",
    "typescript": "^4.8.3",
    "vitest": "^0.23.4",
    "webpack": "^5.75.0",
    "zod": "^3.19.1"
  },

Do I have to anything other than what is outlined in the docs?