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

Question

I've spent days on this issue. Yes, I upgraded to react-scripts 5, yes, I put "react-error-overlay": "6.0.9" in package.json, yes, I deleted the node-modules + package-lock.json, cleared the cache and did npm install again.

The error got WORSE after I did all this. Instead of letting me use the application for a while before the error happening and making everything unresponsive, I now get a white screen right when I start the app with this error happening right away.

Also, why is doing "process?.env" instead of "process.env" not solving the issue on the code level?

Error:

`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)`

Code line that's throwing the error:

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

( tried just doing process?.env?, same thing)

My 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"
}

Here is the full file where the error is happening:

/**
            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 doesn't exist on the browser, however process.env.NODE_ENV is hardcoded on build, and so are the other env variables that start with REACT_APP if you added them.

So perhaps create a helper method like this:

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