React Native接入Back4App时Metro解析idb-keyval模块报错

报错根因 #

该问题不是依赖安装失败、Metro缓存导致的，核心原因是高版本idb-keyval（v6.0.0及以上）调整了打包输出路径与package.json入口字段配置，和当前Parse React Native SDK预设的依赖入口路径不匹配，因此即使定位到了包目录，也找不到对应的入口文件。 #

方案1：锁定兼容版idb-keyval（优先推荐，侵入性最低） #

直接将idb-keyval锁定到与Parse SDK完全兼容的v5.1.5版本，执行对应包管理工具命令：

# 使用npm的项目
npm install idb-keyval@5.1.5 --save-exact

# 使用yarn的项目
yarn add idb-keyval@5.1.5 --exact

安装完成后执行命令清空Metro缓存并重启服务：

npx react-native start --reset-cache

重新编译运行项目即可解决问题，不需要修改任何业务代码或构建配置。 #

方案2：配置Metro支持.cjs后缀解析（需保留高版本idb-keyval时使用） #

如果项目有需求必须使用高版本idb-keyval，可以修改Metro配置让其原生支持.cjs格式的模块解析：

• 打开项目根目录下的metro.config.js配置文件
• 在resolver配置项的sourceExts列表中追加cjs后缀，参考配置如下：

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const config = {
  resolver: {
    sourceExts: [
      ...getDefaultConfig().resolver.sourceExts,
      'cjs'
    ]
  }
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

• 保存配置后，同样执行带--reset-cache参数的Metro启动命令，重启服务即可。

方案3：手动配置依赖入口映射（临时应急方案） #

如果上述两个方案均未生效，可以直接在Metro配置中手动指定idb-keyval的实际入口路径：

• 先进入本地项目的node_modules/idb-keyval/dist目录，确认实际存在的cjs入口文件名（高版本通常为index.cjs）
• 修改metro.config.js，添加extraNodeModules映射：

const path = require('path');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const config = {
  resolver: {
    extraNodeModules: {
      'idb-keyval': path.resolve(__dirname, 'node_modules/idb-keyval/dist/index.cjs')
    }
  }
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

• 清缓存重启Metro服务即可。

操作提示：不需要反复删除node_modules重装依赖，完成配置或版本调整后，只要带缓存清理参数启动Metro，就可以避免旧缓存导致的配置不生效问题。

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