okaryo.log

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

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

    #Vite

ささっと解決法

process.env.HOGEimport.meta.env.VITE_HOGEに書き換える。

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

何が起きたか

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

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

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

解決法リターンズ

参照方法

上記でも書いたが、process.env.HOGEimport.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の自動補完が効くようになった。

おわり

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


関連記事
最新記事
プロモーション

This site uses Google Analytics.