expo: [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:
- initialize new expo project: expo init project
- in command line> expo start:web
- change in app.tsx to create error. ex:
<Text>{hello.world()}<Text>where hello is not defined - 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
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 21 (1 by maintainers)
Commits related to this issue
- chore: Corrige erro do process.env na versão web Referência: https://github.com/expo/expo/issues/17547#issuecomment-1235148185 — committed to JameDodgers/sisfila by JameDodgers 2 years ago
I have spent some more time on this and finally got a fix for myself and more information on why it was happening.
tl;dr
Force
react-error-overlayto version6.0.9and the process not defined error will go away and the error screen will show again.Why
Create React App owns the
react-error-overlayand has recently updated all thereact-scriptsto support webpack 5. During this transition they pushed out an update toreact-error-overlayto 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
Why was this closed?
I’m having the same problem using expo 48 and unfortunately nothing that everyone indicated to fix the issue works.
if expo simply said this would have been better than silently closing the issue. Thanks @Jackman3005
I’ll just leave my issue and resolution in case anyone finds this with the same problem as me. The “process is not defined” error was being caused by
babel-plugin-inline-dotenvsubstituting out aprocess.env.ENV_VARto beprocess && [...]. Removing this babel plugin fixed the issue, I realised I didn’t even need it as I had a webpack DefinePlugin doing .env replacement already, and in a less fragile way.Thanks @Jackman3005 for investigating it.
I noticed that in my case, quite annoyingly,
react-error-overlaywas actually being pulled from a globally installedexpo-clidependency. I hadn’t noticed that it was using the globally installed version because I didn’t expectyarn expoto work without having installedexpo-cli. Long story short, I was able to fix it by addingexpo-clias a dev dependency and resolvingreact-error-overlayto version 6.0.9.I was planning to use
patch-packageto patch theprocessaccess inreact-error-overlayto something likewindow.process || {}to circumvent the error, but since they distribute minified (single-line) source in the npm package that would produce a 745 KiB patch. So I guess I’m not doing that.@Jackman3005 Yeah the error is still there, just checked. I really encourage you to open a new issue in my opinion
I have seen some workarounds to resolve react-error-overlay’s version, but shouldnt there be a definitive solution and not a workaround?