Uncaught ReferenceError: process is not defined の解決方法

問題の概要

Reactアプリケーションの開発中に、コンソールに「Uncaught ReferenceError: process is not defined」というエラーが表示される問題が発生することがあります。このエラーは、ホットリロード時やモーダルコンポーネントの追加後に発生することが多く、ブラウザ環境でNode.jsのprocessオブジェクトにアクセスしようとすることが原因です。

根本原因

このエラーは主に以下の2つのシナリオで発生します：

1. Create React App (CRA) を使用している場合: react-error-overlayパッケージのバージョン互換性問題
2. Viteを使用している場合: 環境変数のアクセス方法の違い

注意

processオブジェクトはNode.js環境のグローバルオブジェクトであり、ブラウザ環境ではデフォルトでは利用できません。

解決方法

ケース1: Create React App (CRA) を使用している場合

方法1: react-error-overlayのバージョンを固定する

react-error-overlayのバージョン6.0.10以降に互換性問題があるため、バージョン6.0.9に固定します。

Yarnを使用する場合:

// package.json
"resolutions": {
  "react-error-overlay": "6.0.9"
}

npm v8.3.0以上を使用する場合:

// package.json
"overrides": {
  "react-error-overlay": "6.0.9"
}

変更後、以下のコマンドを実行します：

# node_modulesとロックファイルを削除
rm -rf node_modules package-lock.json yarn.lock

# 依存関係を再インストール
npm install
# または
yarn install

方法2: Webpackプラグインを使用する

cracoを使用している場合：

// craco.config.js
const webpack = require('webpack');

module.exports = {
  webpack: {
    plugins: {
      add: [
        new webpack.DefinePlugin({
          'process.env': JSON.stringify(process.env)
        })
      ]
    }
  }
};

customize-craを使用している場合：

// config-overrides.js
const webpack = require('webpack');
const { override, addWebpackPlugin } = require('customize-cra');

module.exports = override(
  addWebpackPlugin(
    new webpack.DefinePlugin({
      'process.env': {}
    })
  )
);

ケース2: Viteを使用している場合

Viteではprocess.envの代わりにimport.meta.envを使用します。

環境変数の設定方法

.envファイル：

VITE_API_URL=http://localhost:5000
VITE_API_KEY=your_api_key_here

JavaScriptコードでのアクセス方法：

// process.envの代わりにimport.meta.envを使用
const API_URL = import.meta.env.VITE_API_URL;
const API_KEY = import.meta.env.VITE_API_KEY;

// 使用例
const fetchData = async () => {
  const response = await fetch(`${import.meta.env.VITE_API_URL}/data`);
  return response.json();
};

Viteの組み込み環境変数

Viteは以下の組み込み環境変数を提供しています：

• import.meta.env.MODE: アプリの実行モード
• import.meta.env.BASE_URL: ベースURL
• import.meta.env.PROD: 本番モードかどうか
• import.meta.env.DEV: 開発モードかどうか

既存コードの移行

既存のReactアプリをViteに移行した場合、すべてのprocess.env参照をimport.meta.envに変更する必要があります。

// 変更前
const apiUrl = process.env.REACT_APP_API_URL;

// 変更後
const apiUrl = import.meta.env.VITE_API_URL;

注意

Viteでは環境変数のプレフィックスにVITE_を使用します。REACT_APP_プレフィックスは機能しません。

その他の解決策

processポリフィルの追加

Webpack設定でprocessポリフィルを追加する：

// webpack.config.jsまたはcraco.config.js
const webpack = require('webpack');

module.exports = {
  // ...
  resolve: {
    alias: {
      process: "process/browser"
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser'
    })
  ]
};

その後、パッケージをインストール：

npm install --save-dev process

ランタイムでのprocessオブジェクトの設定

アプリケーションの初期化時にprocessオブジェクトを設定する：

// App.jsまたはエントリーファイル
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // ブラウザ環境でprocessオブジェクトを定義
    if (typeof window !== 'undefined' && !window.process) {
      window.process = {
        env: {
          NODE_ENV: process.env.NODE_ENV || 'development'
        }
      };
    }
  }, []);
  
  // アプリケーションの残りの部分
  return /* ... */;
}

トラブルシューティング

よくある間違い

1. 条件付きアクセスの問題:

   // 問題のあるコード
   const value = process?.env?.SOME_VAR;
   
   // 修正後のコード
   const value = process.env.SOME_VAR;

2. index.html内でのprocess使用:

   <!-- 問題のあるコード -->
   <script>
     if (process.env.NODE_ENV !== 'production') {
       // 開発環境用のコード
     }
   </script>
   
   <!-- 修正後のコード (CRAの場合) -->
   <% if (process.env.NODE_ENV !== 'production') { %>
     <script>
       // 開発環境用のコード
     </script>
   <% } %>

デバッグのヒント

1. ブラウザの開発者ツールでwindow.processが定義されているか確認
2. 使用しているビルドツール（CRAまたはVite）を確認
3. 環境変数が正しく設定されているか確認
4. パッケージのバージョン互換性を確認

まとめ

「Uncaught ReferenceError: process is not defined」エラーは、主に以下の方法で解決できます：

1. CRAを使用している場合: react-error-overlayを6.0.9にダウングレード
2. Viteを使用している場合: process.envをimport.meta.envに置換
3. Webpack設定: processポリフィルを追加
4. ランタイム: ブラウザ環境でprocessオブジェクトを定義

使用しているツールチェインに応じて適切な解決方法を選択し、環境変数へのアクセス方法が正しいことを確認してください。