Viteプロジェクトで「Property 'env' does not exist on type 'ImportMeta'」エラーについて

Viteプロジェクトでの「Property 'env' does not exist on type 'ImportMeta'」エラーの解決方法

今回起きた問題

Viteを使用したReactとTypeScriptのプロジェクトで、環境変数にアクセスする際に以下のようなエラーが発生しました。

// 例: 
const hogehogeUrl = import.meta.env.VITE_HOGEHOGE_URL;
                                ^ エラー: Property 'env' does not exist on type 'ImportMeta'.

型アサーションではエラーが回避できなかった

他メディアで紹介されていた、型アサーションを使用した以下のような方法で問題を回避しようとしたのですが、私の今回のケースでは解決できませんでした。

パターン1

const hogehogeUrl = import.meta.env.VITE_HOGEHOGE_URL as string;

パターン2

const hogehogeUrl = import.meta.env.VITE_HOGEHOGE_URL!;

私が解決できた方法

以下の2つの簡単なステップを実行することで解決できました。

1. vite-env.d.ts ファイルの作成

プロジェクトのルートディレクトリ（vite.config.tsがあるのと同じ場所）に vite-env.d.ts ファイルを作成し、以下の内容を追加します。

/// <reference types="vite/client" />

この1行だけで、TypeScriptにimport.meta.envの型定義を提供できます。

2. TSConfigの更新

tsconfig.app.json（またはtsconfig.json）のinclude配列にvite-env.d.tsを追加します。

{
  "compilerOptions": {
    // 既存の設定...
  },
  "include": ["/vite-env.d.ts", "src"]
}

※プロジェクト構造によっては、パスを調整する必要があるかもしれませんので必要に応じて修正してください。

このシンプルな修正で、TypeScriptがimport.meta.envを正しく認識するようになりました。

まとめ

再度同じエラーに遭遇した時の為に、自分の備忘も兼ねて投稿しました。
同様の現象に悩んでいる方のお力になれたら幸いです。
また、ご意見やアドバイスございましたらご指摘いただけるとうれしいです。