执行npx react-native run-android启动React Native项目时遇报错求助

我开发React Native项目已有一段时间，此前一切正常，但从昨天开始，执行npx react-native run-android命令时，Metro在项目完成执行前抛出错误：

Failed to construct transformer:  Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at stableHash (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro-cache\src\stableHash.js:19:8)
    at Object.getCacheKey (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro-transform-worker\src\index.js:647:7)
    at getTransformCacheKey (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\DeltaBundler\getTransformCacheKey.js:32:19)
    at new Transformer (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\DeltaBundler\Transformer.js:180:28)
    at C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\Bundler.js:58:29 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

项目安装到手机后，又出现如下打包错误：

BUNDLE  ./index.js

error: TypeError: Cannot read properties of undefined (reading 'transformFile')
    at C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\Bundler.js:95:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\Bundler.js:14:24)
    at _next (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\Bundler.js:36:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

项目的package.json内容如下：

{
  "name": "mockplus",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@babel/preset-env": "^7.14.7",
    "@firebase/analytics": "^0.7.0",
    "@firebase/app": "^0.7.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/cli-platform-android": "^5.0.1",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/push-notification-ios": "^1.10.1",
    "@react-native-community/slider": "^4.1.3",
    "@react-native-firebase/app": "^12.4.0",
    "@react-native-firebase/auth": "^12.4.0",
    "@react-native-firebase/messaging": "^12.4.0",
    "@react-native-picker/picker": "^2.0.0",
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/drawer": "^5.12.5",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "axios": "^0.21.1",
    "brew": "^0.0.8",
    "gradle": "^1.2.4",
    "install": "^0.13.0",
    "lpf": "^1.0.0",
    "npm": "^7.21.0",
    "npm-install-peers": "^1.2.2",
    "react": "^16.14.0",
    "react-dom": "^17.0.2",
    "react-native": "0.64.4",
    "react-native-alarm-notification": "^1.8.0",
    "react-native-circle-checkbox": "^0.1.6",
    "react-native-compass-heading": "^1.2.1",
    "react-native-date-picker": "^4.2.10",
    "react-native-datepicker": "^1.7.2",
    "react-native-easy-grid": "^0.2.2",
    "react-native-element": "^1.2.1",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-hijri-date-picker-android": "^2.0.0",
    "react-native-image-crop-picker": "^0.36.2",
    "react-native-image-placeholder": "^1.0.14",
    "react-native-looped-carousel": "^0.1.13",
    "react-native-modal": "^12.1.0",
    "react-native-onboarding-swiper": "^1.1.4",
    "react-native-picker-select": "^8.0.4",
    "react-native-progress": "^5.0.0",
    "react-native-push-notification": "^8.1.1",
    "react-native-read-more-text": "^1.1.2",
    "react-native-reanimated": "^2.2.0",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-sensors": "^7.3.2",
    "react-native-share": "^7.0.0",
    "react-native-snackbar": "^2.4.0",
    "react-native-sound": "^0.11.0",
    "react-native-svg": "^12.1.1",
    "react-native-tab-view": "^3.1.1",
    "react-native-track-player": "^3.2.0",
    "react-native-tts": "^4.1.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-video": "^5.1.1",
    "react-native-youtube": "^2.0.2",
    "react-redux": "^7.2.4",
    "reanimated-bottom-sheet": "^1.0.0-alpha.22",
    "redux": "^4.1.0",
    "redux-thunk": "^2.3.0",
    "robust-point-in-polygon": "^1.0.3",
    "toggle-switch-react-native": "^3.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

解决方案 #

1. 处理ERR_OSSL_EVP_UNSUPPORTED错误 #

这个错误是Node.js v17及以上版本的OpenSSL兼容性问题，可通过两种方式解决：

• 临时生效方案：修改package.json的scripts，添加环境变量：

  "scripts": {
    "start": "NODE_OPTIONS=--openssl-legacy-provider react-native start",
    "android": "NODE_OPTIONS=--openssl-legacy-provider react-native run-android",
    "ios": "NODE_OPTIONS=--openssl-legacy-provider react-native run-ios",
    "test": "jest",
    "lint": "eslint ."
  }
  

  保存后重新执行npm run android即可。
• 永久解决：使用nvm将Node.js降级到v16.x LTS版本：

  nvm install 16
  nvm use 16
  

2. 处理Cannot read properties of undefined (reading 'transformFile')错误 #

该错误多由缓存或依赖版本不匹配导致，按以下步骤操作：

• 清除Metro缓存：

  npx react-native start --reset-cache
  

• 移除不必要的依赖：你的项目dependencies中包含@babel/preset-env，React Native项目不需要这个依赖，执行移除命令：

  npm uninstall @babel/preset-env
  

• 重新安装依赖（如果缓存清除后仍未解决）：

  rm -rf node_modules package-lock.json
  npm install
  

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