React Native加载TFJS模型提示存在的group1-shard.bin文件不存在

问题复现 #

当前通过如下函数加载TensorFlow.js模型：

const loadModel = async () => {
  const modelJSON = require('../assets/models/model.json');
  const modelWeights = require('../assets/models/group1-shard.bin');
  const model = await tf
    .loadLayersModel(bundleResourceIO(modelJSON, modelWeights))
    .catch((e) => {
      console.log('Error', e);
    });

  return model;
};

执行require('../assets/models/group1-shard.bin')引入权重文件时，React Native抛出Unable to resolve module ../assets/models/group1-shard.bin错误，提示文件不存在，但项目对应路径下实际存在group1-shard.bin文件。

项目文件结构如下：

完整报错信息如下：

排查与解决 #

• Metro打包器未识别.bin后缀资源
  React Native默认的Metro构建工具的资源后缀白名单默认不包含.bin格式，会直接判定该类文件不存在，这是该问题的最高发诱因。
  修复步骤：
  1. 打开项目根目录下的metro.config.js，在resolver.assetExts配置中新增bin后缀：

  const { getDefaultConfig } = require('metro-config');
  
  module.exports = (async () => {
    const defaultConfig = await getDefaultConfig();
    return {
      resolver: {
        assetExts: [...defaultConfig.resolver.assetExts, 'bin'],
      },
    };
  })();
  

  2. 关闭当前运行的Metro服务，执行npx react-native start --reset-cache清除打包缓存后重新启动项目，旧缓存会导致新配置不生效。
• 相对路径匹配错误
  核对执行require语句的代码文件所在目录，确认到assets/models目录的相对层级计算正确，常见错误是目录移动后未更新相对路径前缀。
• Expo工作流资源未打包
  如果使用Expo托管项目，需要在app.json的assetBundlePatterns字段中新增模型文件的匹配规则，确保模型资源会被打入应用bundle：

  {
    "expo": {
      "assetBundlePatterns": ["assets/models/*"]
    }
  }
  

• bundleResourceIO入参格式错误
  部分版本的@tensorflow/tfjs-react-native要求权重参数传入require返回的资源数字标识而非文件内容，若上述配置完成后仍报错，可确认tfjs和tfjs-react-native版本匹配，避免版本兼容导致的参数解析异常。

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