Next.js×Hasuraでgraphql-codegen生成がエラーになる件

Next.js/Hasura on Heroku/Apollo などで個人開発をしています。
GraphQLの型定義をgraphql-codegenで生成しようとした所ハマったので
メモとして残しておきます。

環境

Hasura: v1.3.3

next: 10.0.6
graphql: 15.5.0
@graphql-codegen/cli: 1.21.3,
@graphql-codegen/typescript": 1.21.1
@graphql-codegen/typescript-operations": 1.17.15
@graphql-codegen/typescript-react-apollo": 2.2.3

エラー内容

上記のモジュールを生成した後、以下のymlを作成して
yarn graphql-codegen --config src codegen.yml
を実行しました。

overwrite: true
schema: 
  - "[★hasuraエンドポイントURL]":
    headers:
      "x-hasura-admin-secret": ${process.env.HASURA_GRAPHQL_ADMIN_SECRET}
documents: 
  - "src/{components,pages,apollo}/**/*.{ts,tsx}"
generates:
  src/apollo/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
    config:
      skipTipename: false
      withHooks: true
      withHOC: false
      withComponent: false
      preResolveTypes: false
      reactApolloVersion: 3
      namingConvention: 
        typeNames: "pascal-case#pascalCase"
        enumValues: "upper-case#upperCase"
      apolloReactCommonImportFrom: "@apollo/client"
      apolloReactHooksImportFrom: "@apollo/client"

すると以下のエラーが...

  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate src/apollo/graphql.tsx
      ✔ Load GraphQL schemas
      ✔ Load GraphQL documents
      ✖ Generate
        → Cannot read property 'name' of undefined
    ✔ Generate src/apollo/graphql.schema.json


 Found 1 error

  ✖ src/apollo/graphql.tsx
    TypeError: Cannot read property 'name' of undefined
        at /Users/s-kawabe/Desktop/Kiraku/node_modules/graphql/type/introspection.js:613:17
        at Array.some (<anonymous>)
        at Object.isIntrospectionType (/Users/s-kawabe/Desktop/Kiraku/node_modules/graphql/type/introspection.js:611:29)
        at Object.Field (/Users/s-kawabe/Desktop/Kiraku/node_modules/@graphql-codegen/typescript/index.cjs.js:354:25)
        at Object.enter (/Users/s-kawabe/Desktop/Kiraku/node_modules/graphql/utilities/TypeInfo.js:370:25)
        at Object.visit (/Users/s-kawabe/Desktop/Kiraku/node_modules/graphql/language/visitor.js:243:26)
        at documents.forEach.doc (/Users/s-kawabe/Desktop/Kiraku/node_modules/@graphql-codegen/typescript/index.cjs.js:359:38)
        at Array.forEach (<anonymous>)
        at includeIntrospectionDefinitions (/Users/s-kawabe/Desktop/Kiraku/node_modules/@graphql-codegen/typescript/index.cjs.js:359:15)
        at Object.plugin (/Users/s-kawabe/Desktop/Kiraku/node_modules/@graphql-codegen/typescript/index.cjs.js:341:38)

恐らく同じ事象となっている人がおらず、原因不明でした...
環境変数の問題かとも思い、Hasuraシークレットキーを直打ちしても同じエラーになります。

解決方法(打開策)

上記の内容をjsで書き換えてこちらを読み込ませたところ無事に型定義ファイルが生成されました！

// eslint-disable-next-line @typescript-eslint/no-var-requires
const dotenv = require('dotenv')

dotenv.config()

module.exports = {
  schema: [
    {
      '[★hasuraエンドポイントURL]': {
        headers: { 'x-hasura-admin-secret': process.env.HASURA_GRAPHQL_ADMIN_SECRET },
      },
    },
  ],
  documents: ['src/{components,pages,apollo}/**/*.{ts,tsx}'],
  overwrite: true,
  generates: {
    'src/apollo/graphql.tsx': {
      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
      config: {
        skipTypename: false,
        withHooks: true,
        withHOC: false,
        withComponent: false,
        preResolveTypes: false,
        scalars: {
          uuid: 'string',
          timestamptz: 'string',
          bigint: 'number',
          _text: 'string[]',
        },
        namingConvention: {
          typeNames: 'pascal-case#pascalCase',
          enumValues: 'upper-case#upperCase',
        },
        apolloReactCommonImportFrom: '@apollo/client',
        apolloReactHooksImportFrom: '@apollo/client',
      },
    },
  },
}

おわりに

[参考記事]
https://qiita.com/mizchi/items/fb9f598cea94d2c8072d
https://qiita.com/ryo2132/items/601ec3c085fcd99658e5

参考にさせていただいた記事などはYAMLを使用していましたが、
今回の技術スタックでは相性が悪い部分があるのでしょうか...