模拟器中的 React Native run-android 错误“无法获取 BatchedBridge，请确保您的捆绑包已正确打包”答案

【问题标题】：React Native run-android error in emulator "Could not get BatchedBridge, make sure your bundle is packaged correctly"模拟器中的 React Native run-android 错误“无法获取 BatchedBridge，请确保您的捆绑包已正确打包”
【发布时间】：2021-06-17 07:22:28
【问题描述】：

我正在使用 Android Studio Emulator 并按照 this doc 配置了 react-native-web 支持。但是每当我运行npm run android 时，都会出现以下错误：

“无法获取 BatchedBridge，请确保您的捆绑包已正确打包”

我尝试了很多解决方案，例如：

删除node_modules并重新安装
清除react-native start --reset-cache中的缓存
在run-android 之前运行react-native start
检查.npmrc

但还没有解决方案。 metro终端也没有错误。

下面是我的package.json

{
  "name": "shipdemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start --reset-cache",
    "test": "jest",
    "lint": "eslint .",
    "web": "webpack serve -d source-map --mode development --config \"./web/webpack.config.js\" --inline --color --hot",
    "build:web": "webpack --mode production --config \"./web/webpack.config.js\" --hot"
  },
  "dependencies": {
    "react": "17.0.1",
    "react-dom": "^17.0.2",
    "react-native": "0.64.2",
    "react-native-web": "^0.16.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-react-native-web": "^0.16.5",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.39.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "jest": {
    "preset": "react-native-web"
  }
}

更新：

启用Pause on Caught Exception 后，我在开发工具中得到了以下信息。

同时，现在我在 Metro 也遇到了错误

【问题讨论】：

我也遵循了相同的教程，但现在得到了同样的错误。我怀疑将react-native 别名为react-native-web 的Babel 配置在正常react-native start 中生效。因为在react-native-web 之前它工作得很好。我会玩它并让你知道。
我无法修复它，但我从 AVD 中删除了模拟器设备，并使用 Play Store API、API 29 创建了一个新设备，现在一切正常。我还没有在这里发布它，因为这不应该是唯一的解决方案。此外，我将 .babelrc 配置移至 webpack.config.js
我的代码工作正常，但是突然开始出现这个错误，然后我无法解决它，所以我执行了上述步骤，它被解决了，但我不知道“如何” .
在 React Native Web 文档中，它们提供了将配置与 Webpack、Babel 和 Flow 集成的方法。但他们从未指定您必须将它们全部添加。所以在某些时候，可能是 webpack 别名不会打扰正常的 React Native，而 Babel 和/或 Flow 会破坏原生 App 的捆绑包。如果我们可以在 web 目录下指定我们自己的 babel 和 flow 配置以及 webpack（如果真的需要的话），那么普通的 RN 配置将保持不变。
我可以确认，在使用 React-Native-Web 时，我不需要在 webpack 之外进行任何配置修改。只需在 webpack use.options 中设置预设和插件方向就足够了，这样您就不需要在 babel config 中使用它们了。我还让它与 NextJS 一起工作，在 next.config.js 中覆盖了简单的 webpack。通过这种方式，我可以处理具有 90% 相同 React-Native 代码的更轻量级的多页网站。

标签： android reactjs react-native metro-bundler

【解决方案1】：

我有修复但背后的原因，发布此答案以提高解决方案的可见性，相当于this commit。

所以我删除了 .babelrc 文件并将模块解析器设置移动到 webpack 配置中，更新了 babel.config.js 所以现在 web 相关设置不会干扰 App 相关的 babel 设置。

我也更新了the mentioned article。

.babelrc:

babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

web/webpack.config.js:

...
...
...

      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: ['module:metro-react-native-babel-preset'],
      // Re-write paths to import only the modules needed by the app
      plugins: [
        'react-native-web',
        [
          'module-resolver',
          {
            alias: {
              '^react-native$': 'react-native-web',
            },
          },
        ],
      ],
...
...
...

【讨论】：