引入react-native-builder-bob自定义模块后开启Chrome调试器React Native应用崩溃

可行解决方案如下： #

方案1：修正自定义模块的打包配置

react-native-builder-bob默认会把未声明为external的依赖打包进产物，调试时重复加载react/react-native实例就会触发Invariant Violation错误，修改自定义模块的package.json配置：

{
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "react-native-builder-bob": {
    "source": "src",
    "output": "lib",
    "targets": ["commonjs", "module", "typescript"],
    "external": ["react", "react-native"]
  }
}

配置完成后重新打包模块，再替换主项目中引入的本地模块文件。

方案2：配置主项目Metro解析规则

在主项目的metro.config.js中添加以下配置，强制所有依赖使用主项目下的react/react-native实例，避免多实例冲突：

const path = require('path');

module.exports = {
  resolver: {
    extraNodeModules: {
      'react': path.resolve(__dirname, 'node_modules/react'),
      'react-native': path.resolve(__dirname, 'node_modules/react-native')
    },
    nodeModulesPaths: [path.resolve(__dirname, 'node_modules')]
  }
};

方案3：调整本地模块的引入方式

如果前两个方案无效，可改用软链接+目录监听的方式引入模块，修改metro.config.js：

const path = require('path');

module.exports = {
  watchFolders: [path.resolve(__dirname, '../my-test-module')], // 替换为你本地模块的实际存储路径
  resolver: {
    extraNodeModules: {
      'react': path.resolve(__dirname, 'node_modules/react'),
      'react-native': path.resolve(__dirname, 'node_modules/react-native')
    }
  }
};

同时删除主项目package.json中"my-test-module": "file:my-test-module"的配置，改为直接在代码中从软链接路径引入模块，或者用yarn link关联本地模块。

方案4：检查模块的原生API调用

Chrome调试模式下JS代码运行在Chrome的V8引擎中，而非App原生的JS引擎，如果你的自定义模块调用了仅原生JS上下文支持的同步原生方法、或者全局特有变量，也会触发运行错误。需要给相关代码添加环境判断，仅在非Chrome调试环境下执行对应逻辑。

所有配置修改完成后，执行yarn start --reset-cache重启打包服务，再重新编译原生端项目即可。

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