导入自定义Yarn组件包执行react-native run报Invariant Violation错误如何解决？

问题根因 #

错误Invariant Violation: no callback found with cbID for module<unknown>本质是React Native JS-Native桥接层的回调ID映射表匹配失败，触发场景和你开发的Yarn包的依赖打包配置强相关，核心原因有两个：

• 你的Yarn包在构建时将react、react-native等核心依赖打包进了最终产物，导致宿主项目中存在两份RN运行时副本。先导入包再启动应用时，两套运行时分别初始化了独立的桥接回调映射表，Native层返回回调时无法匹配到对应JS上下文的cbID，就会抛出该错误；先启动应用再导入时，宿主的RN运行时已经完成全局注册，包内的重复依赖会优先使用宿主已注册的实例，因此不会触发冲突。
• 你的Yarn包存在导入时立即执行的Native模块调用逻辑（比如在index.ts顶级作用域直接调用Native模块方法注册回调），如果包导入早于RN桥接初始化完成，回调注册会落到未就绪的桥接实例上，后续回调触发时无法匹配。

解决方案 #

1. 修正Yarn包的依赖配置 #

打开你的Yarn包的package.json，做如下修改：

• 将react、react-native从dependencies移到peerDependencies中，声明这两个依赖由宿主项目提供，避免打包时被打入产物
• 如果你用的是rollup、tsup等打包工具，要在打包配置的external字段中加入react、react-native以及所有RN原生模块（匹配react-native/*规则），明确标记这些依赖不需要打包

示例package.json配置：

{
  "peerDependencies": {
    "react": ">=17.0.0",
    "react-native": ">=0.68.0"
  },
  "devDependencies": {
    "react": "^18.2.0",
    "react-native": "^0.71.0"
  }
}

2. 移除顶级作用域的原生模块调用 #

检查你的包的所有代码，尤其是index.ts的导出逻辑，不要在顶级作用域直接执行Native模块调用、回调注册等依赖RN桥接就绪的逻辑，改成懒执行：

错误写法示例：

// 顶级作用域直接执行，导入时就会调用
import { NativeModules } from 'react-native';
NativeModules.MyCustomModule.init();

export const MyComponent = () => {/* 组件逻辑 */}

正确写法示例：

import { NativeModules, useEffect } from 'react';

export const MyComponent = () => {
  // 组件挂载时再执行，此时RN桥接已经初始化完成
  useEffect(() => {
    NativeModules.MyCustomModule.init();
  }, []);
  return {/* 组件渲染逻辑 */}
}

3. 验证修复效果 #

• 重新打包你的Yarn包，在宿主项目中更新依赖版本
• 清理宿主项目的构建缓存：执行cd android && ./gradlew clean（安卓）或删除ios/build目录（iOS），同时执行npx react-native start --reset-cache清空Metro缓存
• 先在代码中导入你的包组件，再执行react-native run-android/react-native run-ios启动应用，确认错误不再抛出

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