Uncaught ReferenceError: process is not defined (NOT react-error-overlay)

Describe the bug

Using the optional chaining operator with process (process?.env) throws a ReferenceError stating that process is not defined.

I originally encountered this behaviour because a dependency is using that syntax, then I tried to write the same in my code and it still breaks.

Note that process.env works, and it doesn’t appear to be a problem with react-error-overlay (I also tried to use this fix without success).

A workaround is to add the following in index.tsx:

if (!('process' in window)) {
  // @ts-ignore
  window.process = {}
}

Did you try recovering your dependencies?

I just freshly installed it from scratch using

yarn create react-app temp-app --template typescript

Which terms did you search for in User Guide?

https://github.com/facebook/create-react-app/issues?q=is%3Aissue+uncaught+referenceError%3A+process+is+not+defined https://github.com/facebook/create-react-app/issues?q=is%3Aissue+process+is+not+defined

Environment

Environment Info:

  current version of create-react-app: 5.0.0
  running from ~/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 12.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.12.0 - ~/.nvm/versions/node/v16.12.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.12.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.12.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.83
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.3
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 5.0.0 => 5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Install CRA yarn create react-app temp-app --template typescript
2. Add {process?.env?.NODE_ENV} in App.tsx (e.g. in the <p>)

Expected behavior

development is shown

Actual behavior

blank page, the following error in the browser console

Reproducible demo

https://github.com/EnoahNetzach/create-react-app-no-process

[lovetingyuan]

this is so stupid… can not believe react team could make such mistake…

[waynebloss]

It doesn’t matter if you destructure or use optional chaining, this error just happens whenever you access process outside of a React component as far as I can see.