CodegenConfigの中で環境変数を使うにはdotenvパッケージが必要？

バージョン情報

• @graphql-codegen/cli 5.0.0
• @graphql-codegen/client-preset 4.1.0
• graphql ^16.8.1
• next 14.0.4

やろうとしたこと

GraphQL Code Generatorの設定のschemeに環境変数を使いたかったので以下のようにした。

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  schema: `${process.env.API_URL}/v1/hogehoge`,
  // ...省略
}

npmスクリプトはデフォルトのものを使用

"scripts": {
  // ...省略
  "codegen": "graphql-codegen --config codegen.ts"
},

yarn codegenを実行するとよくわからないエラーが表示される。

browserslist: Unknown browser query `codegen.ts`. Maybe you are using old Browserslist or made typo in query.

日本語にすると「codegen.ts というブラウザクエリは不明です。お使いの Browserslist が古いか、またはクエリに誤りがある可能性があります。」になるらしい。

？？？

解決法

dotenvを使って.env.localから環境変数を読み込むよう、明示的に指定してあげる。

まずはパッケージをインストール（バージョン^16.3.1でした）

$ yarn add dotenv

続いてcodegen.tsファイルに追記

import type { CodegenConfig } from "@graphql-codegen/cli";
import * as dotenv from "dotenv"; // 追加

dotenv.config({ path: ".env.local" }); // 追加

const config: CodegenConfig = {
  schema: `${process.env.API_URL}/v1/hogehoge`,
  // ...省略
}

再度yarn codegenを実行

$ graphql-codegen --config codegen.ts
✔ Parse Configuration
✔ Generate outputs
✨  Done in 1.48s.

できた！！！

コメント

もう使うことはないと思っていたdotenv、久しぶり。

デフォルトで.envを見に行っているのかなと思い、.envも作ってみたけどエラーは変わらなかったので根本的な原因はわかっていません（もやもや）