本記事の概要

Viteで.envが読まれないの、どうしよう～

解決

ソースコード（修正後）

vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { resolve } from "node:path";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname, '')
  return {
    // vite の設定
		base: "./",
		root: "src",
		plugins: [
			react()
		],
		build: {
			// distフォルダに出力
			outDir: resolve(__dirname, "dist"),
			// 存在しないときはフォルダを作成する
			emptyOutDir: true,
			copyPublicDir: true,
			rollupOptions: {
				// entry pointがあるindex.htmlのパス
				input: {
					"": resolve(__dirname, "src/index.html"),
				},
				// bundle.jsを差し替えする
				output: {
					entryFileNames: "assets/bundle.js",
				},
			},
		},
    define: {
      'process.env': env,
    },
  }
})

App.tsx

const env = process.env;

console.log(env);

.env.development

ENV_HAS_READ_DEVELOP=true
VITE_ENV_HAS_READ=true

下記「ソースコード（修正前）」の該当ファイルを上記のものに差し替えた状態でnpm run devを行った結果；

→　環境変数ENV_HAS_READ_DEVELOPならびにVITE_ENV_HAS_READが読み込まれていることが確認できた。

症状

ソースコード（修正前）

package.json

{
  "name": "myapp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.11.1",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.7.0",
    "vite": "^5.4.8"
  }
}

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { resolve } from "node:path";

export default defineConfig({
		base: "./",
		root: "src",
		plugins: [
			react()
		],
		build: {
			outDir: resolve(__dirname, "dist"),
			emptyOutDir: true,
			copyPublicDir: true,
			rollupOptions: {
				input: {
					"": resolve(__dirname, "src/index.html"),
				},
				output: {
					entryFileNames: "assets/bundle.js",
				},
			},
		},
    }
)

src/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="module" src="/main.tsx"></script>
  </head>
<body>
  <div id="root"></div>
</body>
</html>

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
      <App />
  </StrictMode>,
)

App.tsx

console.log(import.meta.env);
const env = process.env;
console.log(env);

function App() {
  return (<></>);
}

export default App

.env

ENV_HAS_READ=true
VITE_ENV_HAS_READ=true

.env.development

ENV_HAS_READ_DEVELOP=true
VITE_ENV_HAS_READ=true

.env.production

ENV_HAS_READ_PRODUCTION=true
VITE_ENV_HAS_READ=true

結果

npm run dev

でブラウザで開き、コンソールを見ると

{BASE_URL: '/', DEV: true, MODE: 'development', PROD: false, SSR: false}BASE_URL: "/"DEV: trueMODE: "development"PROD: falseSSR: false[[Prototype]]: Object
App.tsx:4 Uncaught ReferenceError: process is not defined
    at App.tsx:4:13

Viteのimport.meta.envが存在し、MODE=developmentになっているが、環境変数が読み込まれていない。

Viteでは仕様上、VITE_のフレフィックスをもつ環境変数をimport.meta.env.VITE_****で利用できるハズだが
import.meta.env以下に存在していない。

失敗

Viteにおいて環境変数の対応は本来Viteが行ってくれているが、
これを無視してdotenvを無理やり使うことを試みる。

ソースコード

npm install dotenv

からの

env.ts


import * as dotenv from 'dotenv';

if (import.meta.env.PROD) {
  dotenv.config({ path: '.env' });
  dotenv.config({ path: '.env.production' });
}
if (import.meta.env.DEV) {
  dotenv.config({ path: '.env' });
  dotenv.config({ path: '.env.develop' });
}
if (process.env.ENV === 'local') {
  dotenv.config({ path: '.env' });
  dotenv.config({ path: '.env.local' });
}
const env = process.env;

export default env;

App.tsx

import env from "./env";

console.log(import.meta.env);
console.log(env);

function App() {
  return (<></>);
}

export default App

結果

そこからの試み

よく分からないが、processはNode.jsで動くものであって、ブラウザ上で動くものではないと勝手に考察した。
まずはprocessを強引に作ってみる

こちらの記事を参考に；

vite.config.ts

export default defineConfig({
        ....
        
		define: {
			'process.env': {}
		}
    }
)

vite.config.tsのdefineオプションに入れたものはグローバル変数になる（？）という知見が得られた。

空のオブジェクトを入れたのでエラーが出るのは当然。
多分、processに本来格納されるべきオブジェクトをそのまま入れないとダメなのだろう。そこまでするのは面倒なので、Viteの環境変数ヘルパーから得られた値をここへ入れてみる。

　→　「解決」セクションへ続く

　　（※結局npm install dotenvは不要でした）

もう一つの解決法

vite-plugin-env-compatibleを使用

　→　参考：Uncaught ReferenceError: process is not definedが表示される

ソースコード

npm install vite-plugin-env-compatible

からの

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import env from "vite-plugin-env-compatible";
import { resolve } from "node:path";

export default defineConfig({
		base: "./",
		root: "src",
		plugins: [
			react(),
			env({ prefix: "VITE", mountedPath: "process.env" })
		],
		build: {
			outDir: resolve(__dirname, "dist"),
			emptyOutDir: true,
			copyPublicDir: true,
			rollupOptions: {
				input: {
					"": resolve(__dirname, "src/index.html"),
				},
				output: {
					entryFileNames: "assets/bundle.js",
				},
			},
		},
  }
)

結果

VITE_ENV_HAS_READが読み込まれたので、.envファイルが評価されている。

が、vite-plugin-env-compatibleでmodeに応じて読み込む.envファイルを変える方法がいまいち分からなかったため、今回は採用しなかった。