React Native使用Back4App导入Parse时出现idb-keyval解析错误

问题场景 #

在React Native项目中配置Back4App服务时，参照官方教程使用如下代码导入Parse依赖：

import Parse from "parse/react-native.js"

只要添加该行导入代码，项目就会抛出构建错误，无法正常编译运行。

报错详情 #

Metro打包器在解析路径/Users/reidtaylor/Sessler2022/node_modules/parse/lib/react-native/IndexedDBStorageController.js的idb-keyval依赖时，虽成功定位到/Users/reidtaylor/Sessler2022/node_modules/idb-keyval/package.json文件，但该包main字段配置的入口路径/Users/reidtaylor/Sessler2022/node_modules/idb-keyval/dist/compat.cjs不存在，尝试匹配所有React Native支持的文件后缀（.native、.ios.js、.native.js、.js、.ios.json、.native.json、.json、.ios.ts、.native.ts、.ts、.ios.tsx、.native.tsx、.tsx）、以及该路径下的index入口文件均失败。

核心错误调用堆栈：

at DependencyGraph.resolveDependency (/Users/reidtaylor/Sessler2022/node_modules/metro/src/node-haste/DependencyGraph.js:243:17)
at Object.resolve (/Users/reidtaylor/Sessler2022/node_modules/metro/src/lib/transformHelpers.js:129:24)
at resolve (/Users/reidtaylor/Sessler2022/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
at resolveDependencies (/Users/reidtaylor/Sessler2022/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
at processModule (/Users/reidtaylor/Sessler2022/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)

问题原因 #

• Parse React Native SDK依赖idb-keyval实现本地存储适配，依赖声明时未锁定idb-keyval的兼容版本范围
• 7.0及以上版本的idb-keyval调整了打包产物结构，删除了旧版本存在的dist/compat.cjs入口文件，安装依赖时拉取到不兼容的高版本idb-keyval就会触发入口解析失败的错误

修复方法 #

• 降级idb-keyval到兼容版本
  执行对应包管理命令，将idb-keyval替换为经测试兼容的6.2.1版本：

  # 使用npm的项目
  npm uninstall idb-keyval
  npm install idb-keyval@6.2.1
  
  # 使用yarn的项目
  yarn remove idb-keyval
  yarn add idb-keyval@6.2.1
  

• 清除Metro缓存重启项目
  依赖安装完成后必须清除Metro打包缓存，避免旧的依赖解析缓存导致错误复现：

  npx react-native start --reset-cache
  

• 备选方案：如果降级后仍存在解析错误，可修改项目根目录下的metro.config.js配置，强制指定idb-keyval的正确解析入口：

  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  
  const config = {
    resolver: {
      extraNodeModules: {
        'idb-keyval': require.resolve('idb-keyval/dist/index.cjs')
      }
    }
  };
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), config);
  

  配置修改完成后同样执行清缓存命令重启服务即可。

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