使用expo-auth-session实现谷歌登录时遇ExpoCrypto原生模块缺失错误

我在React Native应用中尝试使用expo-auth-session实现谷歌登录功能，运行代码时出现以下错误：

ERROR Error: Cannot find native module 'ExpoCrypto'
ERROR Invariant Violation: "main" has not been registered.

官方提示该问题可能由以下原因导致：

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

我已尝试执行expo prebuild，但问题未解决，项目package.json配置如下：

{
  "name": "selvaapp",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test:types": "tsc"
  },
  "dependencies": {
    "@notifee/react-native": "^7.7.1",
    "@react-native-community/checkbox": "^0.5.15",
    "@react-native-firebase/app": "^17.4.3",
    "@react-native-firebase/auth": "^17.5.0",
    "@react-native-firebase/firestore": "^17.4.3",
    "@react-native-firebase/messaging": "^17.5.0",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",
    "axios": "^1.3.6",
    "eas": "^0.1.0",
    "eas-cli": "^3.15.0",
    "expo": "~48.0.18",
    "expo-auth-session": "~4.0.3",
    "expo-build-properties": "~0.6.0",
    "expo-checkbox": "~2.3.1",
    "expo-constants": "~14.2.1",
    "expo-crypto": "~12.2.1",
    "expo-splash-screen": "~0.18.2",
    "expo-status-bar": "~1.4.4",
    "expo-web-browser": "~12.1.1",
    "firebase": "^9.22.0",
    "formik": "^2.2.9",
    "moment-timezone": "^0.5.43",
    "react": "18.2.0",
    "react-native": "0.71.8",
    "react-native-dropdown-select-list": "^2.0.4",
    "react-native-gesture-handler": "2.9.0",
    "react-native-maps": "1.3.2",
    "react-native-reanimated": "~2.14.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-vector-icons": "^9.2.0",
    "yarn": "^1.22.19"
  },
  "resolutions": {
    "@expo/config-plugins": "~6.0.0",
    "@expo/prebuild-config": "~6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.2",
    "@types/react": "^18.2.12",
    "@types/react-native-vector-icons": "^6.4.13",
    "@types/react-test-renderer": "^18.0.0",
    "@types/styled-components-react-native": "^5.2.1",
    "ts-migrate": "^0.1.35",
    "typescript": "^5.1.3"
  },
  "private": true
}

按以下顺序排查修复问题：

1. 修复ExpoCrypto模块缺失 #

虽然已安装expo-crypto，但原生模块可能未正确链接，执行以下步骤：

• 删除依赖和锁文件：

  rm -rf node_modules package-lock.json yarn.lock
  

• 重新安装依赖：

  yarn install # 或 npm install
  

• 清除Metro缓存：

  npx expo start --clear
  

• 重新执行clean prebuild并编译：

  npx expo prebuild --clean
  yarn android # 或 yarn ios
  

2. 解决"main"未注册问题 #

这个错误多由缓存或入口配置问题导致：

• 确认项目根目录的index.js/index.tsx中存在注册代码，示例：

  import { AppRegistry } from 'react-native';
  import App from './App';
  import { name as appName } from './app.json';
  
  AppRegistry.registerComponent(appName, () => App);
  

• 关闭所有Metro进程，回到项目根目录执行yarn start重启服务；
• 确认app.json中的name字段与package.json的name一致（当前均为selvaapp，无需修改）。

3. 额外排查点 #

• 确保expo-auth-session初始化代码符合Expo 48要求：

  import * as AuthSession from 'expo-auth-session';
  import * as WebBrowser from 'expo-web-browser';
  
  WebBrowser.maybeCompleteAuthSession();
  

• 在使用expo-auth-session的文件中手动引入expo-crypto，避免被Tree Shaking移除：

  import 'expo-crypto';
  

内容的提问来源于stack exchange，提问作者Gustavo de Araujo