Vite で「process is not defined」が解決できない

要約

Uncaught ReferenceError: process is not defined は、Node.js のグローバル変数 process をブラウザで参照したときに出ます。process は Node のランタイムが提供するもので、ブラウザには存在しません。
Vite はバンドル時に Node の process.env を自動でブラウザ用に置き換えたりしないため、環境変数は Vite の流儀である import.meta.env から読みます。
自分のコードは import.meta.env に直し、ライブラリ都合でどうしても process が必要なときは define で補います。

Uncaught ReferenceError: process is not defined

よくある原因

1. 自前コードの process.env: Node の感覚で process.env.FOO を書いている。
2. 依存ライブラリ: ライブラリが内部で process.env.NODE_ENV を読んでおり、それがブラウザに混ざっている。
3. CRA からの移行: process.env.REACT_APP_* の参照が移行後も残っている。
4. プレフィックス違い: Vite は VITE_ で始まる変数だけをクライアントに露出するため、それ以外は import.meta.env に現れない。

解決策

1. import.meta.env に書き換える

自分のコードでは process.env をやめ、import.meta.env を使います。
クライアントへ露出させる変数名は VITE_ で始める必要があります。

// const url = process.env.API_URL  →
const url = import.meta.env.VITE_API_URL;

.env ファイル側も合わせます。

VITE_API_URL=https://api.example.com

なお VITE_ を付けた変数はバンドルに含まれてブラウザから見えるため、API キーなどの秘匿情報は入れないでください。

2. ライブラリ都合の process.env を define で補う

自分では直せないライブラリが process.env を読む場合は、vite.config の define でビルド時に値を埋め込みます。define は文字列を「そのままコードに置換」するので、値は JSON.stringify で囲みます。

// vite.config.ts
export default defineConfig({
  define: {
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    // 参照だけ通したい最低限のフォールバック
    "process.env": {},
  },
});