Uncaught ReferenceError: process is not defined on first load, fixed after hot reload

Description

Apologies in advance and some context: I am using expo, and honestly I am not sure if this is a problem with expo, react-native, react, or another module the app is using, so please let me know if I should report this elsewhere

When I first start up my react-native app and open it up in Chrome, the app is completely unresponsive with this error in the console:

However, if I make any arbitrary change to the code and wait for the app to hot reload, the error goes away and the app is responsive again. This seems very similar to another issue that was filed on the create-react-app project, https://github.com/facebook/create-react-app/issues/11771, however they were experiencing the opposite situation: the app worked for them until a hot reload. And I did try the suggested solution of adding react-error-overlay to the resolutions in my package.json but that did not work.

Any ideas as to what’s going on here? Happy to provide more info if needed.

Version

0.67

Output of npx react-native info

System:
    OS: macOS Mojave 10.14.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 61.52 MB / 32.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.20.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.10 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.67 => 0.67.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Start up the app by running expo start --web
2. Load the app in the browser, experience the error
3. Make any change to the source code, wait for the app to hot reload
4. The app will now work, no error in the console

Snack, code example, screenshot, or link to a repository

package.json for reference:

{
  "name": "foo",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "@types/lodash": "^4.14.178",
    "expo": "~44.0.0",
    "expo-image-picker": "^12.0.1",
    "expo-permissions": "^13.1.0",
    "expo-status-bar": "~1.2.0",
    "lodash": "^4.17.21",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.67",
    "react-native-elements": "^3.4.2",
    "react-native-masonry-list": "^2.16.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "typescript": "~4.3.5"
  },
  "private": true
}

[Orawko]

In my case screen was unresponsive after error. Probably error dialog blocked all clicks in the app.

It’s a temporary solution, but in my case disabling error overlay was helpful: https://stackoverflow.com/a/62857214/10233199

first: yarn add react-error-overlay

then add: stopReportingRuntimeErrors(); in your root component file:

import { stopReportingRuntimeErrors } from 'react-error-overlay';

if (process.env.NODE_ENV === "development" && Platform.OS === 'web') {
  stopReportingRuntimeErrors();
}

...

const App = () => {
...
}

[stvmachine]

+1 i have the same issue but i solved in a different way

I modified the default webpack config as it’s mentioned here: https://docs.expo.dev/guides/customizing-webpack/

And later modifying webpack.config.js to include an alias of the process/browser.

const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const webpack = require('webpack');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  config.resolve.alias = {
    ...config.resolve.alias,
    process: "process/browser",
  };

  config.plugins = [
    ...config.plugins,
    new webpack.ProvidePlugin({
      process: "process/browser",
    }),
  ];
  return config;
};