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

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

I’m facing this issue using Vite + React

Vite uses different syntax

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

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

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

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.

I’m facing this issue using Vite + React

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

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

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

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

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

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?

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

Tried all the above approaches but no luck.

For me guys it’s working in one hit

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

Please try this one

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.

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?

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.

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>
  );
}