原因：なぜViteで 'process' がエラーになるのかCreate React App (CRA) から Vite への移行は、貨物船からスピードボートに乗り換えるような快適さがあります。しかし、古い方法で環境変数にアクセスしようとすると、アプリはロードされる前にクラッシュしてしまうでしょう。
// ❌ Vite でエラーを引き起こすコード
const apiKey = process.env.VITE_API_KEY;
ブラウザのコンソールには、以下のようなエラーが表示されます：
Uncaught ReferenceError: process is not defined
これは、process が Node.js のグローバル変数であり、ブラウザの変数ではないために発生します。CRA が使用する Webpack は、ブラウザ上で Node.js 環境を模倣する「ポリフィル（polyfill）」と呼ばれる追加コードを自動的に挿入します。一方、Vite はこれらを避けることで軽量さを保っています。これにより開発サーバーの起動時間を 300ms 以下に抑えられますが、Node 固有のグローバル変数ではなくモダンな Web 標準を使用する必要があります。
2分でできるデバッグ設定を変更する前に、エラーがどこで発生しているかを特定しましょう。以下の点を確認してください：
- 自分のコードか？ コンポーネント内で
process.envを使っていないか探します。- ライブラリか？ 古い NPM パッケージが Webpack のような環境を想定していないか確認します。Vite ではprocess.envの代わりにimport.meta.envを使用します。自分のコードが原因であれば、単純な置換で修正可能です。サードパーティの依存関係が原因でクラッシュしている場合は、設定で「シム（shim）」を追加する必要があります。
解決策 1：Vite ネイティブの構文を使用する（推奨）Vite は ES Modules (ESM) 構文を使用します。これはモダン JavaScript の標準であり、変数を扱う最も効率的な方法です。
ステップ 1：VITE_ プレフィックス.env ファイル内の変数は、必ず VITE_ で始まる必要があります。そうでない場合、Vite はそれらを無視します。これは、コンピュータのユーザー名などの機密性の高いシステムキーが、誤って公開ブラウザバンドルに漏洩するのを防ぐためです。
# .env
VITE_API_URL=https://api.example.com
VITE_STRIPE_KEY=pk_test_12345
ステップ 2：コードの更新古い Webpack の構文を ESM の同等品に置き換えます。直接置き換えるだけです。
// ❌ 古い方法 (CRA/Webpack)
const url = process.env.VITE_API_URL;
// ✅ 新しい方法 (Vite)
const url = import.meta.env.VITE_API_URL;
解決策 2：レガシーライブラリによるクラッシュの修正自分が process.env を呼び出していなくても、依存関係にあるライブラリが呼び出している場合があります。2020年以降更新されていない古いパッケージを使用している場合、Webpack の自動ポリフィルに依存している可能性があります。これは、vite.config.js の define プロパティを使用して修正できます。
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
define: {
// ライブラリがクラッシュしないように、グローバルな 'process.env' オブジェクトを作成します
'process.env': {}
}
});
この「シム」により、ライブラリが process.env を探したときに、null 参照ではなく空のオブジェクトが見つかるようになります。これは、大規模なリファクタリングを行わずにアプリを動作させるための応急処置です。
解決策 3：TypeScript のインテリセンスimport.meta.env の下に赤い波線が表示されていませんか？TypeScript に Vite 固有の型を教える必要があります。IDE の警告を修正するために、src/vite-env.d.ts を作成または更新してください：
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_API_URL: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
修正の確認開発サーバーを再起動します（npm run dev）。目視だけでなく、コンソールを確認しましょう。App.tsx に一時的なログを追加します：
console.log('API Target:', import.meta.env.VITE_API_URL);
console.log('Current Mode:', import.meta.env.MODE);
値が表示され、ReferenceError が消えていれば、Vite ネイティブの環境変数処理への移行は成功です。