Expo React Native iOS应用运行时出现AppEntry打包失败问题

问题背景 #

按照AWS Amplify文档创建Expo React Native应用，已安装GraphQL API、Storage和Auth组件，但运行iOS应用时持续出现打包失败，报错模块位置不定，但核心都是无法解析@babel/runtime相关模块。

环境配置 #

package.json #

{
  "name": "gimme-golf",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@aws-amplify/react-native": "^1.0.28",
    "@aws-amplify/ui-react-native": "^2.1.6",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-community/netinfo": "^11.3.1",
    "@types/react": "~18.2.45",
    "aws-amplify": "^6.2.0",
    "babel-plugin-module-resolver": "^5.0.2",
    "expo": "~50.0.17",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-get-random-values": "^1.11.0",
    "react-native-safe-area-context": "4.8.2",
    "typescript": "^5.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

App.js代码 #

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {
  withAuthenticator,
  useAuthenticator
} from '@aws-amplify/ui-react-native';

import { Amplify } from 'aws-amplify';
import amplifyconfig from './src/amplifyconfiguration.json';
Amplify.configure(amplifyconfig);

// retrieves only the current value of 'user' from 'useAuthenticator'
const userSelector = (context) => [context.user];

const SignOutButton = () => {
  const { user, signOut } = useAuthenticator(userSelector);
  return (
    <Pressable onPress={signOut} style={styles.buttonContainer}>
      <Text style={styles.buttonText}>
        Hello, {user.username}! Click here to sign out!
      </Text>
    </Pressable>
  );
};

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
    <View style={styles.container}>
      <SignOutButton />
    </View>
  </SafeAreaView>
  );
}
export default withAuthenticator(App);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

报错信息 #

iOS Bundling failed 4396ms (node_modules/expo/AppEntry.js)
Unable to resolve "@babel/runtime/helpers/classCallCheck" from "node_modules/react-native/Libraries/Components/Button.js"

已尝试操作 #

• 删除node_modules和package-lock.json，执行npm i和npx expo install重新安装依赖

解决方案 #

1. 安装缺失的@babel/runtime依赖 #

@babel/runtime是React Native打包所需的核心依赖，当前package.json中未包含，执行以下命令安装：

npm install @babel/runtime --save

2. 清除Expo缓存 #

缓存冲突可能导致模块解析异常，执行缓存清除命令后重启项目：

npx expo start -c

3. 修正App.js中的代码问题 #

当前App.js存在两个未导入的组件，会导致后续运行报错，需补充导入：

// 补充导入Pressable和SafeAreaView
import { StyleSheet, Text, View, Pressable } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

4. 检查Babel配置（可选） #

如果项目中有babel.config.js，确保配置包含Expo预设，示例配置如下：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['module-resolver', {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@': './src'
        }
      }]
    ]
  };
};

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