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

[EnoahNetzach]

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

[masterbater]

I also encountered this. This is not a bug but intended behavior
https://stackoverflow.com/questions/41359504/webpack-bundle-js-uncaught-referenceerror-process-is-not-defined

. Downgrade to react-scripts@4 or just detach your project and add the config on webpack

[EnoahNetzach]

Thanks @masterbater for the answer, but that looks like a different issue, since cra does provide (some of) the env variables through webpack's DefinePlugin.

Indeed process.env.NODE_ENV does work, the issue I'm encountering is with the optional chaining operator.

[ghost]

I am getting this error by simply using destructuring in an export.

export const {
  REACT_APP_ABC = "ABC",
  REACT_APP_XYZ = "XYZ",
} = process.env;

[ghost]

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.

[Klingefjord]

I'm getting this too

[masterbater]

You can read how to set env for react. If the cause is a plugin fork it or ask the author to update it

On Sun, Sep 4, 2022, 6:14 AM Oliver Klingefjord, @.***> wrote:

I'm getting this too

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/12212#issuecomment-1236206060, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGI6VFHSCQCRW7VIDQM4FO3V4PETJANCNFSM5R2IFIFQ . You are receiving this because you were mentioned.Message ID: @.***>

[lovetingyuan]

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

[SourceCipher]

We are trying to update some libraries and we are getting this issue. Tried to add this

  "overrides": {
    "react-error-overlay": "6.0.9"
  }

to package.json and do a clean install, but no changes. We cant update react-scripts as it will crash whole project. How is this an issue?

[enoguchi-lmi]

this issue happens on a clean installation of CRA 5.0.1 whether trying to use process inside the component or not. None of the proposed solutions worked for me including using react error overlay 6.0.9 or yarn

[abhi-dasgupta]

tried everything else, but still stuck with this exact issue

[Veeenz]

No way to solve this. It's totaly frustrating. How are we supposed to start another project with CRA if there are those incredible issues?

[masterbater]

No way to solve this. It's totaly frustrating. How are we supposed to start another project with CRA if there are those incredible issues?

If your project or library doesnt follow this practice then you will encounter this. Please loo at this documentation https://create-react-app.dev/docs/adding-custom-environment-variables/

[arpit-ma]

From last 2 days tried everything which is avail in internet, but still stuck with the same issue

[zithokamvalethu]

How did you solve it a day later I have the same issue.

[HannanHan]

Stupid error,still stuck with this exact issue.

[sourcecode71]

I have used all ( with "react-scripts": "^5.0.1").
"resolutions": { "react-error-overlay": "^6.0.11" },

"scripts":{ "preinstall": "npx npm-force-resolutions", .... },

"devDependencies":{ "react-error-overlay": "^6.0.11", ... }

Not working. I think react-scripts v4 using is not a solution. Now using
const { env } = require('process'); env.NODE_ENV to solve the problem.

[iweurman]

If you possibly use process?.env?.etc remove the question marks so process.env.etc

[dbuchet]

For people still stuck with that error, here is how I fixed it. I used craco because did not want to eject from RS. Then in the craco.config.js having this:

const webpack = require('webpack');

module.exports = {
    webpack: {
        plugins: {
            add: [
                new webpack.ProvidePlugin({
                    process: 'process/browser.js',
                })
            ]
        },
        configure: {
            resolve: {
                fallback: {
                    'fs': false,
                    'path': false,
                    'crypto': false,
                }
            },
        },
    },
};

You might not need to have the configure.resolve.fallback part, but if you're stuck with error like "fs/path/crypto" is not defined, you have the resolution here too :)

You'll also need to have process as dev dependency

yarn add -D process

[joelgrimberg]

any update on this from the CRA team? | feels like not so many people use the process therefore this is still an open issue?

[Decryptus007]

I'm facing this issue using Vite + React

[Ronald-patrick]

I'm facing this issue using Vite + React

Vite uses different syntax

• import.meta.env.VITE_API_URL instead of process.env.

[mdtausifiqbal]

I am facing this issue with react-app-rewired, when anything is updated in the source code then page buttons or any clickable thing becomes unresponsive, and we need to reload the page again and again.

Uncaught ReferenceError: process is not defined at 4043 (:2:13168) at r (:2:306599) at 8048 (:2:9496) at r (:2:306599) at 8641 (:2:1379) at r (:2:306599) at :2:315627 at :2:324225 at :2:324229 at e.onload (index.js:1:1)

[niranjan404]

I am facing this issue with react-scripts-rewired, when anything is updated in the source code then page buttons or any clickable thing becomes unresponsive, and we need to reload the page again and again.

Uncaught ReferenceError: process is not defined at 4043 (:2:13168) at r (:2:306599) at 8048 (:2:9496) at r (:2:306599) at 8641 (:2:1379) at r (:2:306599) at :2:315627 at :2:324225 at :2:324229 at e.onload (index.js:1:1)

You can use the below to package.json

//if you use npm "devDependencies": { "react-error-overlay": "6.0.9" }, "overrides": { "react-error-overlay": "6.0.9" }

//if you use yarn "devDependencies": { "react-error-overlay": "6.0.9" }, "resolutions": { "react-error-overlay": "6.0.9" }

and try reinstalling deps, this might be because of react-scripts >=4 have this react-error-overlay dependency which you might not be installed in your project

[mdtausifiqbal]

I am facing this issue with react-scripts-rewired, when anything is updated in the source code then page buttons or any clickable thing becomes unresponsive, and we need to reload the page again and again. Uncaught ReferenceError: process is not defined at 4043 (:2:13168) at r (:2:306599) at 8048 (:2:9496) at r (:2:306599) at 8641 (:2:1379) at r (:2:306599) at :2:315627 at :2:324225 at :2:324229 at e.onload (index.js:1:1)

You can use the below to package.json

//if you use npm "devDependencies": { "react-error-overlay": "6.0.9" }, "overrides": { "react-error-overlay": "6.0.9" }

//if you use yarn "devDependencies": { "react-error-overlay": "6.0.9" }, "resolutions": { "react-error-overlay": "6.0.9" }

and try reinstalling deps, this might be because of react-scripts >=4 have this react-error-overlay dependency which you might not be installed in your project

it Solved my problem, thanks

[Shivamrbic]

For me guys it's working in one hit

 "overrides": {
    "react-error-overlay": "6.0.9"
  }

Please try this one

[Harmed2002]

Tenía el mismo problema en React + Vite, pero esto me solucionó:

Vite usa una sintaxis diferente

• import.meta.env.VITE_API_URL en lugar de process.env.

[SainagChunduru]

Tried all the above approaches but no luck.

[Samrj12]

If it was an error with simple peers, this solved it for me: https://stackoverflow.com/questions/74421952/uncaught-referenceerror-process-not-defined-simple-peer-javascript

[chrisdel101]

From stackoverflow this "works" For some reason plain process is undefined but process.NODE_ENV (etc) works. This is baffling.

# app.js
function App() {
    useEffect(() => {
      window.process = {
        ...window.process,
      };
    }, []);
   return (
   <div className="App">
      THIS IS OKAY
      {process.env.REACT_APP_API_KEY)}
      THIS IS NOT - it's undefined
      {process) 
   <Todo />
   </div>
  );
}

[prasanthyejje]

Tenía el mismo problema en React + Vite, pero esto me solucionó:

Vite usa una sintaxis diferente

• import.meta.env.VITE_API_URL en lugar de process.env.

Hi @Harmed2002 , process.env is generating on vite build command. it is being generated in __federation_shared_react.js file with below condition process.env.NODE_ENV === 'production'

can you please give any more details to resolve this issue ?