React Native项目Hermes引擎报错：TypeError读取undefined的array属性

问题描述 #

我正在开发一款基于Expo的React Native应用，此前运行正常。两天未操作后再次启动时出现故障，抛出以下错误。尝试新建项目并重新导入代码后问题依旧：

iOS打包完成 76ms
ERROR TypeError: Cannot read property 'array' of undefined, js engine: hermes
ERROR Invariant Violation: "main" 未注册。可能原因如下：

• Metro（本地开发服务器）在错误目录运行。检查Metro状态，停止后在当前项目重启。
• 模块加载失败导致未调用AppRegistry.registerComponent, js engine: hermes

项目package.json相关配置：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "@expo/vector-icons": "^13.0.0",
    "@react-native-community/viewpager": "5.0.11",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "axios": "^1.6.2",
    "cron": "^3.1.6",
    "expo-constants": "~14.4.2",
    "expo-dev-client": "~2.4.12",
    "expo-device": "~5.4.0",
    "expo-image-picker": "~14.3.2",
    "expo-notifications": "~0.20.1",
    "expo-server-sdk": "^3.7.0",
    "express": "^4.18.2",
    "multer": "^1.4.5-lts.1",
    "react-native-elements": "^3.4.3",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-image-picker": "^7.1.0",
    "react-native-paper": "^5.11.4",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-snap-carousel": "^1.3.1",
    "react-native-vector-icons": "^10.0.2",
    "react-native-video": "^5.2.1",
    "react-native-webview": "13.2.2",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

问题分析 #

两个错误中，TypeError: Cannot read property 'array' of undefined是核心诱因——模块加载失败导致AppRegistry.registerComponent未被调用，进而触发"main"未注册的报错。从package.json可定位多个依赖冲突：

• 同时安装react-navigation v4和@react-navigation/native v6，两个版本导航库完全不兼容
• 共存@expo/vector-icons和react-native-vector-icons，Expo项目仅需官方适配的前者
• expo-image-picker与react-native-image-picker冲突，Expo环境优先使用官方库
• react-native-snap-carousel长期未更新，与React Native 0.72（Expo 49）存在兼容性问题

解决步骤 #

1. 卸载冲突依赖 #

执行以下命令清理冲突包：

# 卸载v4版本导航库
npm uninstall react-navigation react-navigation-stack
# 卸载原生图标库，保留Expo官方图标库
npm uninstall react-native-vector-icons
# 卸载原生图片选择库，保留Expo官方库
npm uninstall react-native-image-picker
# 卸载不兼容的轮播库（可替换为Expo官方轮播库）
npm uninstall react-native-snap-carousel
# 若需要轮播功能，安装Expo官方适配库
expo install expo-carousel

2. 彻底清除缓存 #

# 清除npm缓存
npm cache clean --force
# 清除Expo和Metro缓存并重启服务
expo r -c

3. 重新安装依赖 #

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

4. 检查代码错误 #

• 全局搜索代码中所有使用.array的位置，确认对应变量已正确导入/初始化（例如PropTypes.array需确保导入prop-types库）
• 检查导航相关代码，确保完全使用@react-navigation v6的API（如v6中使用createNativeStackNavigator而非v4的createStackNavigator）

5. 验证修复 #

运行命令重启项目：

expo start --ios

内容的提问来源于stack exchange，提问作者Alessio Torregrossa