react-scripts 5报process未定义 常规修复方案无效求助

排查Uncaught ReferenceError: process is not defined报错多日，已尝试网上所有公开的常规解决方案：

• 升级项目依赖至react-scripts 5
• 在package.json中配置"react-error-overlay": "6.0.9"
• 删除node_modules文件夹与package-lock.json文件，清理npm缓存后重新执行npm install

完成上述操作后问题反而加重：原本应用可正常运行一段时间后才触发报错导致页面无响应，现在启动应用直接白屏，报错立即触发。
同时存在核心疑问：为何在代码层面使用可选链写法process?.env替代process.env，仍然无法从代码层面规避该报错？尝试process?.env?写法后问题依旧。

Uncaught ReferenceError: process is not defined
    at ./src/GlobalProperties.ts (GlobalProperties.ts:18:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/pages/LoginPage.tsx (ForgotPasswordPage.tsx:75:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/error/pages/NotFoundPage.tsx (ForbiddenPage.tsx:34:1)
    at options.factory (react refresh:6:1)

environment: process !== undefined ? (process.env?.REACT_APP_ENV || "DEV") : "DEV",

{
  "name": "my_app_name",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/app": "1.1.1",
    "@capacitor/core": "3.5.1",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/keyboard": "1.2.2",
    "@capacitor/status-bar": "1.0.8",
    "@ionic/react": "^6.0.3",
    "@ionic/react-router": "^6.0.3",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^14.2.0",
    "@types/date-fns": "^2.6.0",
    "@types/jest": "^28.1.1",
    "@types/node": "^17.0.41",
    "@types/qs": "^6.9.7",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router": "^5.1.18",
    "@types/react-router-dom": "^5.3.3",
    "@types/validator": "^13.7.1",
    "date-fns": "^2.28.0",
    "ionicons": "^6.0.2",
    "moment": "^2.29.1",
    "print-js": "^1.6.0",
    "react": "^17.0.0",
    "react-acceptjs": "^0.2.0",
    "react-device-detect": "^2.2.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.0",
    "typescript": "^4.5.5",
    "validator": "^13.7.0",
    "web-vitals": "^2.1.4",
    "workbox-background-sync": "^6.5.3",
    "workbox-broadcast-update": "^6.5.3",
    "workbox-cacheable-response": "^6.5.3",
    "workbox-core": "^6.5.3",
    "workbox-expiration": "^6.5.3",
    "workbox-google-analytics": "^6.5.3",
    "workbox-navigation-preload": "^6.5.3",
    "workbox-precaching": "^6.5.3",
    "workbox-range-requests": "^6.5.3",
    "workbox-routing": "^6.5.3",
    "workbox-strategies": "^6.5.3",
    "workbox-streams": "^6.5.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  "devDependencies": {
    "@capacitor/cli": "3.5.1",
    "cors": "^2.8.5",
    "dotenv": "^16.0.1",
    "react-error-overlay": "^6.0.9"
  },
  "description": "An Ionic project"
}

/**
            README

  To change the title of the app (in the title bar of browser), edit /public/index.html

  For app name in the app or android store, edit ionic.config.json "name" attr.

*/

import { StateType } from './javatoreact/Types';

// const process : any = process || {};

const GlobalProperties = {

  averageDebounceTime: 500,
  environment: process !== undefined ? (process.env?.REACT_APP_ENV || "DEV") : "DEV",
};

const DEFAULT_DEV_API = "CENSORED";

// this is a separate const to make sure it can't be changed at runtime
export const ENVIRONMENT_WEB_SERVICE_URL = process?.env?.REACT_APP_API || DEFAULT_DEV_API;

export const getColorByStatus = (status?: StateType) => {
  let color = "medium";

  switch(status) {
    case StateType.SCHEDULED:
      color = "primary";
      break;
    case StateType.COMPLETED:
      color = "success";
      break;
    case StateType.REJECTED:
      color = "danger";
      break;
    case StateType.CANCELLED:
    case StateType.POSTPONED:
      color = "warning";
      break;
  }
  return color;
}// end getColorByStatus

export default GlobalProperties;

为什么可选链process?.env无法规避报错 #

ReferenceError是JS引擎在当前作用域完全找不到目标变量时直接抛出的错误，触发优先级高于可选链的判断逻辑。可选链仅能处理「变量已存在，但访问其属性时值为null/undefined」的场景，只要作用域内没有声明process变量，不管加多少层可选链，引擎在解析到process标识符的瞬间就会抛错，根本走不到后续的属性判断逻辑。
你注释掉的const process : any = process || {};思路是对的，但写法存在问题：等号右侧的process处于变量声明的暂存死区，依然会触发引用错误。

具体修复步骤 #

1. 修正代码层面的变量判断逻辑，把GlobalProperties.ts里所有直接访问process的判断替换为typeof判断——typeof是唯一可以安全访问未声明变量、不会抛出ReferenceError的JS语法：

   // 替换原environment配置
   environment: typeof process !== 'undefined' ? (process.env?.REACT_APP_ENV || "DEV") : "DEV",
   // 替换原ENVIRONMENT_WEB_SERVICE_URL配置
   export const ENVIRONMENT_WEB_SERVICE_URL = typeof process !== 'undefined' ? (process.env?.REACT_APP_API || DEFAULT_DEV_API) : DEFAULT_DEV_API;
   

2. 清理冲突依赖：你之前配置的react-error-overlay@6.0.9是react-scripts 4版本的兼容方案，在react-scripts 5下会直接导致白屏问题，直接从package.json的resolutions和devDependencies字段里删掉所有react-error-overlay相关配置。
3. 修复react-scripts 5的构建配置：react-scripts 5默认移除了Node.js核心模块的浏览器端polyfill，不会自动注入process变量，在项目根目录新建.env文件，添加配置让webpack在构建时自动注入环境变量：

   GENERATE_SOURCEMAP=false
   REACT_APP_ENV=DEV
   

4. 如果项目src目录下没有react-app-env.d.ts文件就新建一个，已有则直接追加全局类型声明，避免TS类型报错：

   declare global {
     namespace NodeJS {
       interface ProcessEnv {
         REACT_APP_ENV: string;
         REACT_APP_API: string;
       }
     }
     var process: {
       env: NodeJS.ProcessEnv
     }
   }
   export {}
   

5. 重新删除node_modules文件夹和package-lock.json文件，执行npm install后重启项目即可恢复正常。

内容的提问来源于stack exchange，提问作者Creature