Property 'env' does not exist on type 'ImportMeta'. any

はじめに

Vite x TypeScript/ Reactでの環境変数使用時にハマったのでメモ。

問題

Supabaseクライアント使用時、APIキーなどが必要なときに環境変数を利用する場面があると思います。

supabase.ts

import { createClient } from "@supabase/supabase-js"

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY,
)

すると、envあたりに以下のようなエラーが。

Property 'env' does not exist on type 'ImportMeta'.
any

直訳すると、

プロパティ 'env' は型 'ImportMeta' に存在しません。

うーんよくわからぬ、、、

解決方法

なぜこれが起きたかはわからないが、tsconfig.jsonのcompilerOptions.typesにvite/clientを追加してあげればなおりました。

tsconfig.json

{
  "compilerOptions": {
    "types": ["node", "jest", "@testing-library/jest-dom", "vite/client"]
  },
}

おわりに

調べると、これはVSCode のTypeScript言語サポートが原因っぽい。