ReferenceError: process is not defined. It seems that this is a mistake that quite a few people make when running the application. The main reason is react-error-overlay package’s dependencies have been upgraded to support webpack v5, and it is no longer compatible with react-script v4. What we need to do is upgrade the packages.
What causes the ReferenceError: process is not defined in React?
Uncaught ReferenceError: process is not defined
at Object.<anonymous> (index.js:6)This error is a response of react-error-overlay. This package’s dependencies have been upgraded to support webpack v5, and it is no longer compatible with react-script v4.
For example, webpack v5 removed access to environment variables using the process.env.MY_ENV_VAR syntax (with MY_ENV_VAR as your environment variable).
How to fix this error?
Upgrade react-scripts package
Open your project and run the following command:
npm i react-scripts@latestIf it doesn’t work, try to install react-error-overlay package 6.0.9
In package.json, add:
"resolutions": {
"react-error-overlay": "6.0.9"
},
"devDependencies":{
"react-error-overlay": "6.0.9",
...
}And run:
npm installUse webpack plugin
This is a rarely used way because, typically, we will use CRA to create new applications.
npm install -D processGo to the webpack configuration file and add the following code:
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
],Summary
If ReferenceError: process is not defined is still present, you try removing package.json and reinstalling the dependencies again. Hope the above solutions will help you. If you have any questions, please feel free to let me know.
After studying and researching, I have acquired the necessary programming skills of a web programmer. In addition to HTML, Css, Bootstrap has some popular libraries such as reactJS and NodeJS. It is enough for me when designing from front-end to back-end.