環境

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")

参考