reactjs - Uncaught ReferenceError : process is not defined (yes I tried all the solutions internet says should solve this)

Question

我已经在这个问题上花了几天时间。是的，我升级到 react-scripts 5，是的，我把 "react-error-overlay": "6.0.9" 放在 package.json 里，是的，我 < strong>删除了 node-modules + package-lock.json，清除了缓存并重新安装了 npm。

在我完成所有这些之后，错误变得更糟。在错误发生之前让我使用该应用程序一段时间并使一切都无响应，我现在在启动该应用程序时立即看到一个白屏并立即发生此错误。

此外，为什么使用“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",

(试过只做过程？.env？，同样的事情)

我的 package.json:

{
  "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;

Answer 1

process 在浏览器上不存在，但是 process.env.NODE_ENV 在构建时是硬编码的，其他以 开头的环境变量也是如此REACT_APP 如果您添加了它们。

所以也许创建一个像这样的辅助方法:

export const isDev = () => {
    try {
        return process.env.NODE_ENV === "development";
    } catch {
        return false;
    }
};