React Native使用vision-camera-face-detector遇__scanFaces未找到错误求助

问题重现 #

使用react-native-vision-camera结合vision-camera-face-detector实现面部检测时，调用scanFaces函数触发Frame Processor错误：Can't find variable: __scanFaces。

代码示例 #

import { scanFaces } from "vision-camera-face-detector";

const frameProcessor = useFrameProcessor((frame) => {
  const scannedFaces = scanFaces(frame);
  if (scannedFaces.length) {
    runOnJS(setFaces)(scannedFaces);
  }
}, []);

当前babel.config配置 #

module.exports = {
  presets: ["module:metro-react-native-babel-preset", "module:react-native-dotenv"],
  env: {
    production: {},
  },
  plugins: [
    [
      "@babel/plugin-proposal-decorators",
      {
        legacy: true,
      },
    ],
    ["@babel/plugin-proposal-optional-catch-binding"],
    [
      'react-native-reanimated/plugin',
      {
        globals: ['__scanFaces'],
      },
    ], // NOTE: this must be last in the plugins
  ],
}

依赖版本 #

"react": "17.0.2",
"react-native": "^0.64.2",
"react-native-reanimated": "2.3.0-beta.2", 
"react-native-vision-camera": "2.13.0", 
"vision-camera-face-detector": "^0.1.7"

解决方案 #

1. 确认Reanimated插件配置正确性 #

• 必须保证react-native-reanimated/plugin在babel插件列表的最后一位，这是Reanimated Frame Processor的强制要求，你的配置已经符合，但可以再次确认没有插件排在它之后。
• 检查globals数组中的__scanFaces拼写是否完全正确（注意前后双下划线），避免大小写或拼写错误。

2. 调整依赖版本以解决兼容性问题 #

你的react-native-reanimated使用的是beta版本，容易和其他依赖产生兼容性问题，建议替换为稳定版：

# npm
npm install react-native-reanimated@2.2.4 --save
# yarn
yarn add react-native-reanimated@2.2.4

同时锁定vision-camera-face-detector到最新稳定版：

npm install vision-camera-face-detector@0.1.8 --save

3. 清理缓存并重新构建 #

缓存问题经常导致这类全局变量未识别的错误，执行以下步骤：

• 删除node_modules并重新安装依赖：

  rm -rf node_modules && npm install
  

• 重置Metro缓存：

  npx react-native start --reset-cache
  

• 重新编译原生项目：
  • iOS：

    cd ios && pod install && cd .. && npx react-native run-ios
    

  • Android：

    npx react-native clean && npx react-native run-android
    

4. 补充代码检查点 #

确保你的代码中正确导入了useFrameProcessor和runOnJS：

import { useFrameProcessor, runOnJS } from 'react-native-vision-camera';
import { scanFaces } from "vision-camera-face-detector";

const frameProcessor = useFrameProcessor((frame) => {
  const scannedFaces = scanFaces(frame);
  if (scannedFaces.length) {
    runOnJS(setFaces)(scannedFaces);
  }
}, []);

内容的提问来源于stack exchange，提问作者Ajay Parambath