使用Xcode 15运行React Native项目时出现__scanCodes不存在错误

问题背景 #

使用Xcode15运行React Native项目（RN版本0.70.8）时，触发ReferenceError: Property '__scanCodes' doesn't exist错误，该错误来自vision-camera-code-scanner@0.2.0库。已尝试以下操作但未解决：

• 在babel.config.js中将__scanCodes添加至react-native-reanimated插件的globals配置
• 删除pods、node_modules等常规清理操作
• 应用GitHub相关Issue的修复方案

配置信息 #

package.json #

{
  "name": "flap",
  "version": "0.8.50",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "android-clean": "cd android && ./gradlew clean && cd .. && react-native run-android",
    "ios": "arch -x86_64 react-native run-ios --scheme flap --simulator='iPhone 14 Pro Max'",
    "ios14pro": "arch -x86_64 react-native run-ios --simulator='iPhone 14 Pro'",
    "ios12pm": "arch -x86_64 react-native run-ios --simulator='iPhone 12 Pro Max'",
    "iosNicat": "arch -x86_64 react-native run-ios --device `Nicat's iPhone`",
    "iosX": "arch -x86_64 react-native run-ios --simulator='iPhone X'",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "clear": "react-native start -- --reset-cache",
    "pod": "cd ios && arch -x86_64 pod install && cd ..",
    "pod-update": "cd ios && arch -x86_64 pod install --repo-update && cd ..",
    "derived": "rm -rf ~/Library/Developer/Xcode/DerivedData"
  },
  "dependencies": {
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.19.1",
    "@react-native-clipboard/clipboard": "^1.12.1",
    "@react-native-community/push-notification-ios": "^1.10.1",
    "@react-native-firebase/analytics": "^16.4.6",
    "@react-native-firebase/app": "^16.4.6",
    "@react-native-firebase/dynamic-links": "16.7.0",
    "@react-native-firebase/messaging": "^16.4.6",
    "@react-native-google-signin/google-signin": "^9.0.0",
    "@react-native-masked-view/masked-view": "^0.2.9",
    "@react-navigation/native": "^6.1.0",
    "@react-navigation/stack": "^6.3.8",
    "add": "^2.0.6",
    "deprecated-react-native-prop-types": "^3.0.1",
    "i": "^0.3.7",
    "jwt-decode": "^3.1.2",
    "lottie-ios": "3.4.0",
    "lottie-react-native": "5.1.4",
    "npm": "^9.8.1",
    "react": "18.1.0",
    "react-native": "0.70.8",
    "react-native-date-picker": "^4.2.6",
    "react-native-device-info": "^10.11.0",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-image-crop-picker": "^0.38.1",
    "react-native-navigation-bar-color": "^2.0.1",
    "react-native-permissions": "^3.6.1",
    "react-native-push-notification": "^8.1.1",
    "react-native-qrcode-svg": "^6.1.2",
    "react-native-reanimated": "2.14.1",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-share": "^8.0.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^13.6.0",
    "react-native-toast-message": "^2.1.5",
    "react-native-vcards": "^2.5.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-video": "^5.2.1",
    "react-native-vision-camera": "2.15.4",
    "react-native-worklets-core": "^0.2.4",
    "serialize-error": "^11.0.2",
    "vision-camera-code-scanner": "^0.2.0",
    "yarn": "^1.22.21"
  },
  "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.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "0.72.3",
    "react-test-renderer": "18.1.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

babel.config.js #

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ["react-native-worklets-core/plugin"],
    [
      'react-native-reanimated/plugin',
      {
        globals: ['__scanCodes']
      },
    ]
  ],
};

错误栈信息 #

ReferenceError: Property '__scanCodes' doesn't exist
at scanCodes (/Users/mahabbatzakariyayev/Documents/workprojects/flap/node_modules/vision-camera-code-scanner/src/index.ts
(300:7):1:49)
at scanCodes (native)
at _f (/Users/mahabbatzakariyayev/Documents/workprojects/flap/node_modules/vision-camera-code-scanner/src/hook.tsx
(13:43):1:121)
at _f (native)
at _f (/Users/mahabbatzakariyayev/Documents/workprojects/flap/node_modules/react-native-vision-camera/src/hooks/useFrameProcessor.ts
(28:21):1:425)

解决方案 #

1. 确认Babel插件顺序 #

确保react-native-reanimated/plugin是babel插件列表中的最后一项，Reanimated插件需要在所有处理worklet的插件之后执行，你的当前配置已满足此要求，后续添加新插件时需保持此顺序。

2. 升级依赖版本 #

当前使用的部分依赖版本较旧，存在与Xcode15的兼容问题：

• 将vision-camera-code-scanner升级至^0.2.1（与react-native-vision-camera@2.15.4兼容）
• 将react-native-reanimated升级至2.x系列最新稳定版（如2.17.0），确保适配RN 0.70.8

3. 彻底清理构建缓存与产物 #

执行以下命令完成深度清理：

# 删除依赖与锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重装依赖
yarn install
# 重置Metro缓存
npx react-native start --reset-cache
# 清理iOS构建文件
rm -rf ios/build
rm -rf ~/Library/Developer/Xcode/DerivedData
cd ios && pod deintegrate && arch -x86_64 pod install && cd ..

4. 验证FrameProcessor的Worklet标记 #

确保使用scanCodes的FrameProcessor函数顶部添加'worklet';指令，这是Reanimated识别worklet函数的必要条件：

import { useFrameProcessor } from 'react-native-vision-camera';
import { scanCodes } from 'vision-camera-code-scanner';

const frameProcessor = useFrameProcessor((frame) => {
  'worklet'; // 必须添加此标记
  const scannedCodes = scanCodes(frame);
  // 处理扫描结果逻辑
}, []);

5. 适配Xcode15构建配置 #

在ios/Podfile的post_install钩子中添加以下配置：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'vision-camera-code-scanner'
      target.build_configurations.each do |config|
        # 适配Xcode15最低部署版本要求
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '14.0'
        # 禁用Bitcode避免构建错误
        config.build_settings['ENABLE_BITCODE'] = 'NO'
      end
    end
  end
end

修改后执行arch -x86_64 pod install重新安装Pods。

内容的提问来源于stack exchange，提问作者Mahabbat Zakariyayev