Mac M1安装React Native Debugger报错及resolutions配置方法咨询

一、解决react-devtools<4.11版本安装时electron 404报错 #

报错原因是electron v9没有适配arm64架构的安装包，M1芯片原生支持从electron v11版本开始，可通过包管理器的版本覆盖规则修复：

项目本地安装场景 #

• 打开项目根目录的package.json文件
• 若使用Yarn作为包管理器，新增resolutions字段指定覆盖electron版本：

{
  // 原有package.json内容保持不变，新增以下字段
  "resolutions": {
    "electron": "^11.0.1"
  }
}

• 若使用npm v8.3及以上版本，新增overrides字段指定覆盖版本：

{
  // 原有package.json内容保持不变，新增以下字段
  "overrides": {
    "react-devtools/electron": "^11.0.1"
  }
}

• 保存文件后执行对应安装命令：
  • Yarn：yarn add react-devtools@4.10.1 --dev
  • npm：npm install react-devtools@4.10.1 --save-dev

全局安装场景 #

• 右键点击终端应用，选择「显示简介」，勾选「使用Rosetta打开」
• 重启终端后执行全局安装命令：npm install -g react-devtools@"<4.11.0"，即可避开404报错

二、解决DevTools后端版本不匹配报错 #

该报错通常是React Native Debugger内置的devtools版本与项目要求不匹配导致，和本地单独安装的react-devtools无关，按以下步骤操作即可修复：

• 完全退出已打开的React Native Debugger，卸载旧版本
• 安装适配M1芯片的v0.12.1及以上版本React Native Debugger，该版本已内置符合<4.11要求的devtools，无需额外单独安装react-devtools包
• 启动RN Debugger后，打开调试设置页，确认Disable DevTools选项未勾选
• 启动React Native应用，打开调试菜单选择调试模式，即可正常连接无协议版本报错
• 若仍有冲突，可先卸载全局安装的高版本devtools：npm uninstall -g react-devtools

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