React "process is not defined" Error

Problem

When working with React applications, you may encounter the error Uncaught ReferenceError: process is not defined in the browser console. This typically occurs when code attempts to access the Node.js process global object, which is only available in server-side environments, not in browsers.

The error often appears in scenarios involving:

• Environment variable access via process.env
• Hot reloading during development
• Certain third-party libraries that expect a Node.js environment
• React applications created with Create React App (especially version 4)
• Vite-based React projects with incorrect environment variable usage

Solution

For Create React App Users

Method 1: Pin react-error-overlay version

The most common solution for Create React App users is to pin the react-error-overlay dependency to version 6.0.9:

package.json with npm

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

package.json with yarn

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

After adding this to your package.json, delete your node_modules and lock file (package-lock.json or yarn.lock), then reinstall dependencies.

Method 2: Upgrade react-scripts

Upgrade to the latest version of react-scripts (version 5 or higher):

npm install react-scripts@latest
# or
yarn add react-scripts@latest

For Vite Users

Vite doesn't provide the process.env object by default. Instead, it uses import.meta.env:

1. Prefix environment variables with VITE_ in your .env file:

   VITE_API_URL=http://localhost:3000
   VITE_APP_NAME=My App

2. Access variables using import.meta.env:

   const apiUrl = import.meta.env.VITE_API_URL;
   const appName = import.meta.env.VITE_APP_NAME;

3. If you need to support legacy code expecting process.env, add this to your vite.config.js:

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
     plugins: [react()],
     define: {
       'process.env': {}
     }
   });

For Webpack Configuration (Advanced Users)

If you're configuring Webpack directly (without Create React App), you can use the DefinePlugin:

const webpack = require('webpack');

module.exports = {
  // ... other config
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env)
    })
  ]
};

For CRACO users:

// craco.config.js
const webpack = require('webpack');

module.exports = {
  webpack: {
    plugins: {
      add: [
        new webpack.DefinePlugin({
          'process.env': JSON.stringify(process.env)
        })
      ]
    }
  }
};

Browser Polyfill Approach

As a temporary workaround, you can inject the process object into the browser's window:

// In your main App.js or index.js
useEffect(() => {
  window.process = {
    env: { ...process.env },
    ...window.process,
  };
}, []);

Best Practices

1. Environment Variables:

   • Use REACT_APP_ prefix for Create React App
   • Use VITE_ prefix for Vite projects
   • Never commit sensitive data to version control

2. Library Compatibility:

   • Check if libraries are browser-compatible
   • Use browser-friendly alternatives when possible (e.g., path-browserify instead of path)

3. Build Tools:

   • Keep your build tools updated
   • Regularly check for known issues with your specific version

WARNING

Avoid using the browser polyfill approach in production. It's better to fix the underlying issue rather than patching the global environment.

Troubleshooting

If you're still experiencing issues:

1. Clear your node_modules and lock files
2. Check for multiple versions of problematic dependencies
3. Ensure all environment variables are properly prefixed
4. Verify your build tool version compatibility

# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install

# Or for yarn
rm -rf node_modules yarn.lock
yarn install

Conclusion

The "process is not defined" error in React typically stems from environment variable handling differences between Node.js and browser environments. The solution depends on your build tool:

• Create React App: Pin react-error-overlay or upgrade react-scripts
• Vite: Use import.meta.env with VITE_ prefixed variables
• Custom Webpack: Use DefinePlugin to provide process.env

Always ensure your environment variables are properly configured for your specific build tool to prevent runtime errors.