npx graphql-code-generator init is erroring out

[japrozs]

hi, i'm trying to generate Typescript GraphQL Schema and i used the docs but the 'init' command is not working. I am trying to do all of this in a Next.JS 13 project :

$ npx graphql-code-generator init                                                   
/Users/japroz/coding/programming/bid-two-travel/web/node_modules/cliui/build/index.cjs:292
const stripAnsi = require('strip-ansi');
                  ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/japroz/coding/programming/bid-two-travel/web/node_modules/strip-ansi/index.js from /Users/japroz/coding/programming/bid-two-travel/web/node_modules/cliui/build/index.cjs not supported.
Instead change the require of index.js in /Users/japroz/coding/programming/bid-two-travel/web/node_modules/cliui/build/index.cjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/japroz/coding/programming/bid-two-travel/web/node_modules/cliui/build/index.cjs:292:19)
    at Object.<anonymous> (/Users/japroz/coding/programming/bid-two-travel/web/node_modules/yargs/build/index.cjs:1:60678)
    at Object.<anonymous> (/Users/japroz/coding/programming/bid-two-travel/web/node_modules/yargs/index.cjs:5:30)
    at Object.<anonymous> (/Users/japroz/coding/programming/bid-two-travel/web/node_modules/@graphql-codegen/cli/cjs/config.js:15:41)
    at Object.<anonymous> (/Users/japroz/coding/programming/bid-two-travel/web/node_modules/@graphql-codegen/cli/cjs/cli.js:27:21)
    at Object.<anonymous> (/Users/japroz/coding/programming/bid-two-travel/web/node_modules/@graphql-codegen/cli/cjs/bin.js:4:18) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.19.0

My codegen.yml file:

overwrite: true
schema: "http://localhost:4000/graphql"
documents: "src/graphql/**/*.graphql"
generates:
    src/generated/graphql.tsx:
        plugins:
            - "typescript"
            - "typescript-operations"
            - "typescript-react-apollo"

I have tried so many different methods but none seems to work. This is my package.json

{
    "name": "web",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "gen": "graphql-codegen --config codegen.yml"
    },
    "dependencies": {
        "@apollo/client": "^3.9.2",
        "@headlessui/react": "^1.7.18",
        "@hello-pangea/dnd": "^16.5.0",
        "@radix-ui/react-accordion": "^1.1.2",
        "@radix-ui/react-dropdown-menu": "^2.0.6",
        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-tooltip": "^1.0.7",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.0",
        "formik": "^2.4.5",
        "graphql": "^16.8.1",
        "next": "14.1.0",
        "next-themes": "^0.2.1",
        "next-transition-bar": "^1.1.1",
        "react": "^18",
        "react-contenteditable": "^3.3.7",
        "react-dom": "^18",
        "react-icons": "^5.0.1",
        "react-textarea-autosize": "^8.5.3",
        "sanitize-html": "^2.11.0",
        "sonner": "^1.4.0",
        "tailwind-merge": "^2.2.1",
        "tailwindcss-animate": "^1.0.7"
    },
    "devDependencies": {
        "@graphql-codegen/cli": "^5.0.0",
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "@types/react-mentions": "^4.1.13",
        "@types/react-places-autocomplete": "^7.2.14",
        "@types/sanitize-html": "^2.9.5",
        "@types/uuid": "^9.0.8",
        "autoprefixer": "^10.0.1",
        "eslint": "^8",
        "eslint-config-next": "14.1.0",
        "gqlgen": "^0.1.17",
        "postcss": "^8",
        "tailwindcss": "^3.3.0",
        "typescript": "^5.3.3",
        "uuid": "^9.0.1"
    }
}

and this is my tsconfig

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}