React Uncaught ReferenceError: process is not defined

by

Upgrading to react-scripts v5 is not always the solution.

The full reason for this bug is described here. In short here is a brief summary:

The error is as a result of react-error-overlay (which many people would never have heard of because it is a dependency of react-scripts). This package’s dependencies were update to support webpack v5, which unfortunately is not compatible with react-scripts v4.

Method 1

If upgrading to react-scripts v5 is not working for you, you can also try another workaround which is to pin react-error-overlay to version 6.0.9:

Delete your yarn.lock or package-lock.json, then install your dependencies again.

yarn

yarn will take the resolutions field into consideration out of the box.

"resolutions": {
  "//": "See https://github.com/facebook/create-react-app/issues/11773",
  "react-error-overlay": "6.0.9"
}

For yarn workspaces, place the above resolution in the root package.json, not in the problematic folder. See this issue comment.

npm (>=v8.3.0)

The equivalent of resolutions for npm is overrides.

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

npm (<8.3.0)

You need to make sure npm uses the resolutions field when you run npm install. To automate the installation, see this answer

Method 2

Yet another (not so popular) workaround is to use a webpack plugin:

plugins:[
  new webpack.DefinePlugin({
      process: {env: {}}
  })
]

If you use craco (v6.3.0+), you just need to modify your craco.config.js file to add that plugin:

{
  ...
  webpack: {
    plugins: {
      add: [
        new webpack.DefinePlugin({
          process: {env: {}}
        })
      ]
    }
  }
}

For customize-cra users, see this answer or this github comment.

This last method is not popular because not many CRA users ever have to touch webpack directly to work with react.

More Related Contents:

  1. Is there a “Best Practices” on designing an application written both in React and React-Native?
  2. Programmatically navigate using React router
  3. What’s the difference between “super()” and “super(props)” in React when using es6 classes?
  4. My React Component is rendering twice because of Strict Mode
  5. How to set one component’s state from another component in React
  6. Template not provided using create-react-app
  7. Is it possible to use if…else… statement in React render function?
  8. Component does not remount when route parameters change
  9. How to cancel a fetch on componentWillUnmount
  10. React.createElement: type is invalid — expected a string
  11. What is use of curly braces in an ES6 import statement?
  12. Handling async request with React, Redux and Axios?
  13. react setState with dynamic key
  14. Sending the bearer token with axios
  15. How to access the “key” property from a reactjs component
  16. What does ‘Only a ReactOwner can have refs.’ mean?
  17. react-router vs react-router-dom, when to use one or the other?
  18. Unexpected block statement surrounding arrow body
  19. Reactjs: Unexpected token ‘
  20. React – the right way to pass form element state to sibling/parent elements?
  21. Warning: It looks like you’re using the development build of the Firebase JS SDK
  22. Pass multiple parameters to event handlers in React
  23. How to resolve “Cannot use import statement outside a module” from Jest when running tests?
  24. VirtualizedList: You have a large list that is slow to update
  25. is it possible to React.useState(() => {}) in React?
  26. How to minimize the size of webpack’s bundle?
  27. ESLint Must use destructuring state assignment
  28. create react app not picking up .env files?
  29. React Hook useEffect has a missing dependency: ‘list’
  30. Show/Hide components in ReactJS

Leave a Comment