Expo开发构建报错：RNGestureHandlerModule未找到及main未注册

问题现象 #

本地运行正常，但构建开发版本并运行时出现以下两个错误：

错误1 #

Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGestureHandlerModule' could not be found.
Verify that a module by this name is registered in the native binary.Bridgeless mode: false.
TurboModule interop: false. Modules loaded: {"NativeModules":["PlatformConstants","LogBox","SourceCode","Timing","AppState","BlobModule","WebSocketModule","DevSettings","DevToolsSettingsManager","Networking","Appearance","DevLoadingView","HeadlessJsTaskSupport","DeviceInfo","UIManager","ImageLoader","SoundManager","IntentAndroid","DeviceEventManager","NativeAnimatedModule","I18nManager"],"TurboModules":[],"NotFound":["NativePerformanceCxx","NativePerformanceObserverCxx","RedBox","BugReporting","LinkingManager","NativeReactNativeFeatureFlagsCxx","RNCSafeAreaContext","RNGestureHandlerModule"]}, js engine: hermes

错误2 #

ERROR  Invariant Violation: "main" has not been registered. This can happen if:
- Metro（本地开发服务器）在错误目录运行。检查Metro是否运行，停止并在当前项目重启。
- 模块因错误加载失败，未调用`AppRegistry.registerComponent`，js engine: hermes

已查阅相关问题并尝试解决方案，但均无效。

项目代码 #

App.js #

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import ContactScreen from './screens/ContactScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Contact" component={ContactScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js #

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Home Page</Text>
      <Button
        title="Go to Contact Page"
        onPress={() => navigation.navigate('Contact')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});

export default HomeScreen;

ContactScreen.js #

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const ContactScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Contact Page</Text>
      <Button
        title="Go to Home Page"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});

export default ContactScreen;

package.json配置 #

{
  "name": "yoyo",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/stack": "^6.4.1",
    "expo": "^51.0.22",
    "expo-dev-client": "~4.0.20",
    "expo-status-bar": "~1.12.1",
    "react": "18.2.0",
    "react-native": "0.74.3",
    "react-native-document-picker": "^9.3.0",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-navigation": "^5.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

复现步骤 #

npx create-expo-app yoyo --template blank
cd yoyo
yarn add expo
npx expo install expo-dev-client
npm install -g eas-cli
eas login
npx eas build:configure
npx eas build --profile development --platform android

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