viteでビルド時、"import.meta.env"という「文字列」がエラーになる場合がある

環境

vite: 4.0.0
react: 18.2.0
typescript: 4.9.3

起こった事象と対処方法

viteを使用したプロジェクトでvite buildを実行したところ、以下のようなエラーが出ました。

 $ tsc && vite build
 vite v4.0.4 building for production...
 ✓ 154 modules transformed.
 Unexpected token (Note that you need plugins to import files that are not JavaScript)
 file: (省略)
  9: 
 10:   if (!blar) {
 11:     throw new Error('import.meta.env.VITE_BLAR の値が不適切です');
                                                                     ^
 12:   }
 error during build:

このエラーは、以下のようにVITE_BLARという環境変数を取得している部分で起きています。

   const blar = import.meta.env.VITE_BLAR;
 
   if (!blar) {
     throw new Error('import.meta.env.VITE_BLAR の値が不適切です');
   }

そのため、初めは「viteでのビルド時に環境変数が取得できていない」という要因によるエラーだと思って色々調べていました。しかし、原因は表題の通りで、throw new Error()やconsole.log()などで文字列の"import.meta.env"を使っていたためにこのエラーが発生しているようでした。
そのため、該当箇所のテキストからimport.meta.env.の部分を削除すると、エラーは出なくなりました。

おまけ

色々試してみたところ、console.logで"import.meta.env"を記述しても、必ずしもエラーが出るというわけではなさそうでした。
試したものの結果を以下にまとめます。

• エラーが出るパターン
  • .envファイルに書かれている環境変数を呼び出している場合
    • console.log("import.meta.env.VITE_BLAR") など
  • "import.meta.env"のみの場合
    • console.log("import.meta.env")
    • viteのビルトイン変数のうち、MODEとBASE_URLの場合
      • console.log("import.meta.env.MODE")
      • console.log("import.meta.env.BASE_URL")
• エラーが出ないパターン
  • .envファイルにない環境変数を呼び出している場合
    • console.log("import.meta.env.VITE_HOGE") など
  • "import.meta"のみの場合
    • console.log("import.meta")
  • viteのビルトイン変数のうち、DEV、PROD、SSRの場合
    • console.log("import.meta.env.DEV")
    • console.log("import.meta.env.PROD")
    • console.log("import.meta.env.SSR")

参考

• 環境変数とモード | Vite (https://ja.vitejs.dev/guide/env-and-mode.html)
• 【Vite】謎のエラーが発生 | IT土方の奮闘記 (https://it-blue-collar-dairy.com/mysterious-error-of-building-by-vite/)