[Web] Uncaught ReferenceError: process is not defined with blank white screen

Summary

Initializing fresh project with expo init, running expo start:web, and then changing App.tsx file to produce an error. For example:

export default function App() {
  return (
    <View style={styles.container}>
      <Text>{hello.world()}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

will show a blank white screen instead of an overlay of error from “react-error-overlay”. As well as in console the following error:

Uncaught ReferenceError: process is not defined
    4043 blank line 4342 > injectedScript:2
    r blank line 4342 > injectedScript:2
    8048 blank line 4342 > injectedScript:2
    r blank line 4342 > injectedScript:2
    8641 blank line 4342 > injectedScript:2
    r blank line 4342 > injectedScript:2
    <anonymous> blank line 4342 > injectedScript:2
    <anonymous> blank line 4342 > injectedScript:2
    <anonymous> blank line 4342 > injectedScript:2
    onload index.js:1

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Web

SDK Version (managed workflow only)

45

Environment

  expo-env-info 1.0.3 environment info:
    System:
      OS: Windows 10 10.0.19044
    Binaries:
      Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: AI-212.5712.43.2112.8512546
    npmPackages:
      expo: ~45.0.0 => 45.0.4
      react: 17.0.2 => 17.0.2
      react-dom: 17.0.2 => 17.0.2
      react-native: 0.68.2 => 0.68.2
      react-native-web: 0.17.7 => 0.17.7
    Expo Workflow: managed

Reproducible demo

To Reproduce:

1. initialize new expo project: expo init project
2. in command line> expo start:web
3. change in app.tsx to create error. ex: <Text>{hello.world()}<Text> where hello is not defined
4. in browser, the screen should be blank with error in console about process is not defined

Github repo: https://github.com/ramiel1999/expo-web-blank-screen

[Jackman3005]

I have spent some more time in this and finally got a fix for myself and more information on why it was happening.

tl;dr

Force react-error-overlay to version 6.0.9 and the process not defined error will go away and the error screen will show again.

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

Why

Create React App owns the react-error-overlay and has recently updated all the react-scripts to support webpack 5. During this transition they pushed out an update to react-error-overlay to support webpack 5. Since it was only a patch version update most people have pulled the update into their code, but unfortunately it is not backwards compatible with Webpack 4!

Expo support for webpack 5 is still in progress

Issue with react-error-overlay and process not defined

[fo-fo]

Why was this closed?