Viteで環境変数を使おうとするとprocess is not defined

ささっと解決法

process.env.HOGEをimport.meta.env.VITE_HOGEに書き換える。

もっと詳しく知るには公式ドキュメントを読むことをおすすめする。

何が起きたか

先日、create-react-app製のポートフォリオサイトをViteに乗り換えた。

すると、以前process.env.REACT_APP_WEBHOOK_URLと環境変数を参照していた箇所でprocess is not definedとエラーが出るようになった。

調べてみると、Viteでは環境変数の参照方法が違うらしい。

解決法リターンズ

参照方法

上記でも書いたが、process.env.HOGEをimport.meta.env.VITE_HOGEに書き換える。

プレフィックスとしてVITE_が必要になる。例えば、.envファイルは以下のようになる。

# これは読み込まれる
VITE_HOGE=fuga

# これは読み込まれない
HOGE=fuga

TypeScript用の設定

例えば、以下のようにして環境変数を呼び出したとする。

const url = import.meta.env.VITE_URL
const response = await axios.get(url)

そうすると、 Argument of type 'string | boolean | undefined' is not assignable to parameter of type 'string'と型定義で怒られてしまう。

環境変数に対してもTypeScriptの自動補完を効かせるためには、以下の型定義をsrc/vite-env.d.ts(またはenv.d.ts)ファイルに記述する。

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

interface ImportMetaEnv {
  readonly VITE_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

これでTypeScriptの自動補完が効くようになった。

おわり

上記の設定以外にも、環境ごとに環境変数を分けたい場合の設定なども公式ドキュメントに記載されている。ぜひ参照されたい。