使用pnpm运行React Native项目时遇ExpoApplication模块找不到错误

问题场景 #

使用pnpm脚本运行基于Expo的React Native项目，项目可正常构建，但Metro加载脚本后报错Cannot find native module 'ExpoApplication', js engine: hermes，Android和iOS平台均出现此问题，Node版本为18。

错误栈信息 #

Cannot find native module 'ExpoApplication', js engine: hermes 
    at ContextNavigator (http://192.168.1.50:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=src%2Fapp:175304:24)
    at ExpoRoot (http://192.168.1.50:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=src%2Fapp:175276:28)
    at App
    at ErrorToastContainer (http://192.168.1.50:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=src%2Fapp:360077:24)
    at ErrorOverlay
    at withDevTools(ErrorOverlay) (http://192.168.1.50:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=src%2Fapp:359831:27)
    at RCTView
    at CssInterop.View (http://192.168.1.50:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=src%2Fapp:11004:45)
    at RCTView
    at CssInterop.View (http://192.168.1.50:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=src%2Fapp:11004:45)
    at AppContainer (http://192.168.1.50:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=src%2Fapp:87827:36)
    at main(RootComponent) (http://192.168.1.50:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=src%2Fapp:98144:28)

项目package.json配置 #

{
  "scripts": {
    "start": "cross-env EXPO_NO_DOTENV=1 expo start",
    "prebuild": "cross-env EXPO_NO_DOTENV=1 pnpm expo prebuild",
    "android": "cross-env EXPO_NO_DOTENV=1 expo run:android",
    "ios": "cross-env EXPO_NO_DOTENV=1 expo run:ios",
    "doctor": "npx expo-doctor@latest",
    "preinstall": "npx only-allow pnpm",
    "start:staging": "cross-env APP_ENV=staging pnpm run start",
    "prebuild:staging": "cross-env APP_ENV=staging pnpm run prebuild",
    "android:staging": "cross-env APP_ENV=staging pnpm run android",
    "ios:staging": "cross-env APP_ENV=staging pnpm run ios",
    "start:production": "cross-env APP_ENV=production pnpm run start",
    "prebuild:production": "cross-env APP_ENV=production pnpm run prebuild",
    "android:production": "cross-env APP_ENV=production pnpm run android",
    "ios:production": "cross-env APP_ENV=production pnpm run ios",
    "build:development:ios": "cross-env APP_ENV=development EXPO_NO_DOTENV=1 eas build --profile development --platform ios",
    "build:development:android": "cross-env APP_ENV=development EXPO_NO_DOTENV=1 eas build --profile development --platform android ",
    "build:staging:ios": "cross-env APP_ENV=staging EXPO_NO_DOTENV=1 eas build --profile staging --platform ios",
    "build:staging:android": "cross-env APP_ENV=staging EXPO_NO_DOTENV=1 eas build --profile staging --platform android ",
    "build:production:ios": "cross-env APP_ENV=production EXPO_NO_DOTENV=1 eas build --profile production --platform ios",
    "build:production:android": "cross-env APP_ENV=production EXPO_NO_DOTENV=1 eas build --profile production --platform android ",
    "postinstall": "cd ../.. && husky install apps/mobile/.husky",
    "app-release": "cross-env SKIP_BRANCH_PROTECTION=true np --no-publish --no-cleanup --no-release-draft",
    "version": "pnpm run prebuild && git add .",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "type-check": "tsc  --noemit",
    "lint:translations": "eslint ./src/translations/ --fix --ext .json  ",
    "test": "jest",
    "test:ci": "pnpm run test --coverage",
    "test:watch": "pnpm run test --watch",
    "install-maestro": "curl -Ls 'https://get.maestro.mobile.dev' | bash",
    "e2e-test": "maestro test .maestro/ -e APP_ID=com.obytes.development"
  },
  "dependencies": {
    "@clerk/clerk-expo": "^1.0.2",
    "@expo/metro-runtime": "^3.1.3",
    "@gorhom/bottom-sheet": "^4.6.0",
    "@hookform/resolvers": "^2.9.11",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@sectiontn/otp-input": "^0.3.7",
    "@shopify/flash-list": "1.6.3",
    "@tanstack/react-query": "^4.36.1",
    "app-icon-badge": "^0.0.15",
    "axios": "^1.6.5",
    "expo": "~50.0.17",
    "expo-build-properties": "~0.11.1",
    "expo-constants": "~15.4.6",
    "expo-dev-client": "~3.3.11",
    "expo-font": "~11.10.3",
    "expo-image": "~1.10.6",
    "expo-linear-gradient": "^12.7.2",
    "expo-linking": "~6.2.2",
    "expo-localization": "~14.8.4",
    "expo-router": "~3.4.8",
    "expo-secure-store": "^12.8.1",
    "expo-splash-screen": "0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.4",
    "i18next": "^22.5.1",
    "install": "^0.13.0",
    "lodash.memoize": "^4.1.2",
    "moti": "^0.28.1",
    "nativewind": "^4.0.36",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-error-boundary": "^3.1.4",
    "react-hook-form": "^7.49.3",
    "react-i18next": "^12.3.1",
    "react-native": "0.73.6",
    "react-native-avoid-softinput": "^4.0.2",
    "react-native-circular-progress": "^1.4.0",
    "react-native-basic-carousel": "^1.1.2",
    "react-native-flash-message": "^0.4.2",
    "react-native-gesture-handler": "~2.14.1",
    "react-native-international-phone-number": "^0.7.6",
    "react-native-mmkv": "2.6.3",
    "react-native-reanimated": "~3.6.2",
    "react-native-restart": "0.0.27",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-svg": "14.1.0",
    "react-native-web": "~0.19.10",
    "react-query-kit": "^3.2.0",
    "tailwind-variants": "^0.1.20",
    "zod": "^3.22.4",
    "zustand": "^4.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.23.7",
    "@commitlint/cli": "^17.8.1",
    "@commitlint/config-conventional": "^17.8.1",
    "@dev-plugins/react-navigation": "^0.0.5",
    "@dev-plugins/react-query": "^0.0.5",
    "@expo/config": "~8.5.4",
    "@react-native-community/eslint-config": "^3.2.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react-native": "^12.4.3",
    "@types/i18n-js": "^3.8.9",
    "@types/jest": "^29.5.11",
    "@types/lodash.memoize": "^4.1.9",
    "@types/react": "~18.2.48",
    "@types/react-test-renderer": "^18.0.7",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "babel-plugin-module-resolver": "^5.0.0",
    "cross-env": "^7.0.3",
    "dotenv": "^16.3.2",
    "eslint": "^8.57.0",
    "eslint-plugin-i18n-json": "^4.0.0",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "eslint-plugin-tailwindcss": "^3.10.1",
    "eslint-plugin-testing-library": "^6.2.0",
    "eslint-plugin-unicorn": "^46.0.1",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^8.0.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-expo": "~50.0.4",
    "jest-junit": "^16.0.0",
    "lint-staged": "^13.3.0",
    "metro-babel-register": "^0.73.10",
    "np": "^7.7.0",
    "prettier": "^2.8.8",
    "react-test-renderer": "^18.2.0",
    "tailwindcss": "^3.3.2",
    "ts-jest": "^29.1.1",
    "typescript": "^5.3.3"
  },
  "packageManager": "pnpm@8.6.5"
}

解决方案 #

1. 安装缺失的expo-application依赖 #

ExpoApplication原生模块由expo-application包提供，你的项目依赖中未包含该包，执行以下命令安装：

pnpm add expo-application

安装完成后，重新执行预构建命令：

pnpm run prebuild

2. 清除缓存与构建产物 #

• 清除Metro缓存，重启开发服务器：

pnpm expo start --clear

• 手动删除平台构建目录：
  • Android：删除android/app/build文件夹
  • iOS：删除ios/build文件夹
• 重新运行对应平台项目：pnpm run android或pnpm run ios

3. 检查依赖兼容性 #

运行Expo Doctor工具检查依赖版本冲突：

pnpm run doctor

根据工具提示修复所有依赖不兼容问题，确保所有Expo相关包版本与expo@~50.0.17匹配。

4. 调整pnpm依赖hoisting配置（可选） #

如果是pnpm的依赖hoisting策略导致Expo模块未被正确暴露，在项目根目录创建.npmrc文件，添加以下内容：

public-hoist-pattern[]=*expo*

然后重新安装所有依赖：

pnpm install

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