使用Expo运行克隆的React Native项目时遭遇构建错误求助

项目信息 #

package.json #

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^12.0.0",
    "@react-native-async-storage/async-storage": "^1.15.5",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^6.0.3",
    "@react-navigation/native": "^6.0.0",
    "@react-navigation/stack": "^6.0.4",
    "@tensorflow-models/coco-ssd": "^2.1.0",
    "@tensorflow-models/mobilenet": "^2.0.4",
    "@tensorflow/tfjs": "^3.3.0",
    "@tensorflow/tfjs-react-native": "^0.6.0",
    "clarifai": "^2.9.1",
    "expo": "^42.0.0",
    "expo-asset": "~8.3.3",
    "expo-camera": "~11.2.2",
    "expo-constants": "~11.0.1",
    "expo-font": "~9.2.1",
    "expo-gl": "~10.4.2",
    "expo-image-manipulator": "~9.2.2",
    "expo-image-picker": "~10.2.2",
    "expo-linking": "~2.3.1",
    "expo-splash-screen": "~0.11.2",
    "expo-status-bar": "~1.0.4",
    "expo-web-browser": "~9.2.0",
    "jpeg-js": "^0.4.2",
    "node-notifier": "10.0.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-fs": "^2.16.6",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "3.4.0",
    "react-native-web": "~0.17.1"
  },
  "devDependencies": {
    "@babel/core": "~7.15.0",
    "@types/react": "~17.0.17",
    "@types/react-native": "~0.64.12",
    "@types/react-native-dotenv": "^0.2.0",
    "jest-expo": "^42.0.0",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-native-dotenv": "^2.4.2",
    "typescript": "~4.3.5"
  },
  "private": true
}

tsconfig.json #

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": true,
    "baseUrl": ".",
    "jsx": "react-native",
    "lib": [
      "dom",
      "esnext"
    ],
    "moduleResolution": "node",
    "noEmit": true,
    "noErrorTruncation": true,
    "noUnusedLocals": true,
    "paths": {
      "~/*": [
        "./*"
      ]
    },
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true,
    "target": "ESNext",
    "types": [
      "jest"
    ]
  }
}

执行命令与报错日志 #

执行命令：yarn start

启动时报错：

yarn run v1.22.19
$ expo start
WARNING: The legacy expo-cli does not support Node +17. Migrate to the versioned Expo CLI (npx expo).
Starting project at /media/pragati/hdd1/react-native-image-recognition-object-detection
Starting Metro Bundler

› Metro waiting on exp://192.168.29.245:19000
› Scan the QR code above with Expo Go (Android) or
the Camera app (iOS)

› Press a │ open Android
› Press w │ open web

› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
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 (/media/pragati/hdd1/react-native-image-recognition-object-detection/node_modules/metro-cache/src/stableHash.js:19:8)
    at JsTransformer.getCacheKey (/media/pragati/hdd1/react-native-image-recognition-object-detection/node_modules/metro/src/JSTransformer/worker.js:478:7)
    at getTransformCacheKey (/media/pragati/hdd1/react-native-image-recognition-object-detection/node_modules/metro/src/DeltaBundler/Transformer/getTransformCacheKey.js:39:29)
    at new Transformer (/media/pragati/hdd1/react-native-image-recognition-object-detection/node_modules/metro/src/DeltaBundler/Transformer.js:147:28)
    at /media/pragati/hdd1/react-native-image-recognition-object-detection/node_modules/metro/src/Bundler.js:54:29
    at processTicksAndRejections (node:internal/process/task_queues:95:5) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

按下ctrl+c后出现的错误：

/media/pragati/hdd1/react-native-image-recognition-object-detection/node_modules/metro/src/Bundler.js:14
    var info = gen[key](arg);
                       ^
TypeError: Cannot read properties of undefined (reading 'end')
    at /media/pragati/hdd1/react-native-image-recognition-object-detection/node_modules/metro/src/Bundler.js:70:26
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/media/pragati/hdd1/react-native-image-recognition-object-detection/node_modules/metro/src/Bundler.js:14:24)
    at _next (/media/pragati/hdd1/react-native-image-recognition-object-detection/node_modules/metro/src/Bundler.js:34:9)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

已尝试的操作 #

• 将react-native版本更换为"react-native": "0.63.4"，但仍出现相同错误。

解决方案 #

1. 解决Node.js版本兼容问题（核心错误） #

报错ERR_OSSL_EVP_UNSUPPORTED是因为Node.js 17+使用了新的OpenSSL算法，旧版Metro（项目中为0.66.2）不兼容，有两种解决方式：

方式一：临时指定兼容环境变量启动

修改package.json中的start脚本，添加环境变量：

"scripts": {
  "start": "NODE_OPTIONS=--openssl-legacy-provider expo start",
  "android": "NODE_OPTIONS=--openssl-legacy-provider expo start --android",
  "ios": "NODE_OPTIONS=--openssl-legacy-provider expo start --ios",
  "web": "NODE_OPTIONS=--openssl-legacy-provider expo start --web",
  "eject": "expo eject",
  "test": "jest --watchAll"
}

修改后重新执行yarn start。

方式二：降级Node.js版本

将Node.js降级到16.x LTS版本，该版本不会触发OpenSSL兼容问题。

2. 升级Expo CLI（解决警告问题） #

日志提示旧版expo-cli不支持Node 17+，可按以下操作处理：

• 卸载旧版expo-cli：yarn global remove expo-cli
• 之后使用npx expo start代替expo start启动项目，无需全局安装新版CLI。

3. 重置依赖（可选） #

如果上述操作后仍有问题，删除现有依赖文件后重新安装：

rm -rf node_modules yarn.lock
yarn install

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