【Vite】npm run buildするとReferenceError: env is not definedエラーが出る

はじめに

process.envで環境変数を読み込めるようにvite.config.jsを修正したところエラーになったので、戒めをこめて記事にします。

問題

process.envで環境変数を読み込めるようにvite.config.jsを修正したところReferenceError: env is not definedエラーとなりビルドできない。

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(),
		env({ prefix: "VITE",  mountedPath: "process.env" }) 
	]
})

解決方法

vite-plugin-env-compatibleをimportできていなかった。

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+ import env from "vite-plugin-env-compatible";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(),
		env({ prefix: "VITE",  mountedPath: "process.env" }) 
	]
})

ライブラリのインストールもできていなかったため、インストール

$ npm i --save-dev vite-plugin-env-compatible

おわりに

importを忘れるという、ちょっと恥ずかしいエラーでした。

参考