Issue: Metro dev server crashes with "Cannot read properties of undefined (reading 'handle')" after upgrading to React Native 0.78
Description
After upgrading React Native from 0.77 to 0.78, I encountered a crash when trying to run react-native start. The server fails to start with the following error:
Steps to Reproduce
- Create or update a React Native project to version 0.78
- Run
npx react-native start
- Observe the crash with the error message above
Attempted Solutions
I tried different versions of @react-native-community/cli:
None of these versions resolved the issue.
Investigation
Upon investigating, I found that the issue is related to the middleware handling in @react-native/community-cli-plugin. The Connect middleware system expects either a function or an object with a handle method, but indexPageMiddleware is undefined in some cases.
The error occurs in Connect's use method (index.js:87) which tries to check if the middleware has a handle method via typeof handle.handle === 'function', but handle is undefined.
Root Cause
The root cause appears to be in @react-native/community-cli-plugin/dist/commands/start/middleware.js where:
- There's no proper fallback when the community middleware doesn't export
indexPageMiddleware
- The middleware format is not properly checked to ensure it's compatible with Connect
Environment
react-native info here
npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 15.0.1
CPU: (10) arm64 Apple M2 Pro
Memory: 207.58 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.14.0
path: /usr/local/bin/node
Yarn:
version: 1.22.22
path: /usr/local/bin/yarn
npm:
version: 11.1.0
path: /usr/local/bin/npm
Watchman:
version: 2025.02.17.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.2
- iOS 18.2
- macOS 15.2
- tvOS 18.2
- visionOS 2.2
- watchOS 11.2
Android SDK:
API Levels:
- "27"
- "33"
- "34"
- "35"
Build Tools:
- 33.0.1
- 34.0.0
- 35.0.0
System Images:
- android-27 | ARM 64 v8a
- android-33 | Google Play ARM 64 v8a
- android-34 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2023.1 AI-231.9392.1.2311.11255304
Xcode:
version: 16.2/16C5032a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.9
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 17.0.0
wanted: ^17.0.0
react:
installed: 19.0.0
wanted: ^19.0.0
react-native:
installed: 0.78.0
wanted: ^0.78.0
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Additional Context
I've created a PR with a fix for this issue: react/react-native#49847
The fix ensures there's always a properly formatted middleware object with a handle method, even when the community middleware doesn't provide one.
Issue: Metro dev server crashes with "Cannot read properties of undefined (reading 'handle')" after upgrading to React Native 0.78
Description
After upgrading React Native from 0.77 to 0.78, I encountered a crash when trying to run
react-native start. The server fails to start with the following error:Steps to Reproduce
npx react-native startAttempted Solutions
I tried different versions of
@react-native-community/cli:None of these versions resolved the issue.
Investigation
Upon investigating, I found that the issue is related to the middleware handling in
@react-native/community-cli-plugin. The Connect middleware system expects either a function or an object with ahandlemethod, butindexPageMiddlewareis undefined in some cases.The error occurs in Connect's
usemethod (index.js:87) which tries to check if the middleware has ahandlemethod viatypeof handle.handle === 'function', buthandleis undefined.Root Cause
The root cause appears to be in
@react-native/community-cli-plugin/dist/commands/start/middleware.jswhere:indexPageMiddlewareEnvironment
react-native info here
Additional Context
I've created a PR with a fix for this issue: react/react-native#49847
The fix ensures there's always a properly formatted middleware object with a
handlemethod, even when the community middleware doesn't provide one.