【Vite】envファイルはあってるはずなのに Error: hoge is not defined.になってしまった時の対処法

はじめに

viteでreactとsupabaseを用いて自分専用のログインページを作ろうとしていた。
自分のログインページってなんかかっこいいですよね。

結論

環境変数のプレフィックスVITE_をtsx側でもつける必要がある。

環境

• vite/5.4.2
• darwin-x64
• node-v20.17.0

エラー内容

supabaseのurlとkeyを.envに載せていたがどうもその内容を使ってるtsxでエラーが起きる。
エラーハンドリングによるとどうも中身が空らしい

原因

.envの方ではVITE_をつけているけど実際に使う方ではつけていなかった。

❌const supabaseUrl = import.meta.env.SUPABASE_URL;
⭕️const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;

今となれば何を当たり前のことをと思うが、なぜか.metaがVITE_の役割をしてくれそうと勘違いしていた。

おわりに

ちなみに著者は半日このエラーに悩まされ続けたので今回初めてながら執筆してみた。
もし参考になる人がいたら僕の半日は報われると思うので供養してあげてください。