问题标签 [metro-bundler]

我有一个运行良好的 react native 项目，然后我切换到另一个也是 react native 项目的项目。当我回到第一个项目的开发时，我运行了以下命令。我使用物理设备进行调试。

1. cd ./projectfolder
2. react-native start --reset-cache
3. react-native run-android在另一个终端

现在出现以下问题，我想知道是什么原因造成的。

• react-native start启动 Metro Bundler，但完成后不显示文件的加载进度react-native run-android 。（不提供文件）
• 应用程序仍然在没有任何红屏的情况下启动。（如果 Metro Bundler 没有显示任何进度，这会如何发生？）

• 由于应用程序启动，我可以摇动正在运行的设备并尝试启用热加载，但它在红屏上给出错误。

  

（对不起质量不好，我是从互联网上得到的。我的物理设备上也有同样的信息。）

我尝试了以下方法。

• 使用 清除 npm 缓存npm cache clean --force。
• 确保笔记本电脑和手机在同一个wifi上。
• 添加android:usesCleartextTraffic="true"到清单中，因为根据大多数 github 答案存在与 Android 9 相关的更改。
• 卸载应用程序并尝试再次运行。
• 重启一切。
• 运行 bundle 命令并尝试，但它无助于启动调试器。

我可以对此有任何帮助吗？提前致谢。

是否已经可以在 react-native 中使用顶级等待？我看到它已被添加到 TypeScript 3.8（我没有使用 TS，我只是想看看它是否有帮助但没有）。然而，在 react-native 文件中，转换是由 babel 处理的，我认为当前的 Metro 预设不能处理顶级等待。有什么办法让它工作吗？

我最近将我的 React Native 应用程序更新到了 0.61.5 版。旧版本是 0.59.3

在我进行升级时，一切都运行良好。然后，我尝试制作一个签名的 APK 并提交给 Android Store 进行 beta 测试。该 APK 不适用于我的任何 Android 设备。它只是在打开时给出了一个空白的白屏 - javascript失败了。

后来，我能够复制错误，并让实际和虚拟设备显示这个红屏（见图），即使是为了测试，只要应用程序专门在 Android Studio 中构建。

错误内容为：console.error：“React Native 版本不匹配。

JavaScript 版本：0.59.3 本机版本：0.61.5 等...

当我在 Android Studio 之外的终端中“npm run start”时，它会启动 Metro 捆绑器。然后一切正常，无论是真实设备还是虚拟设备。不知何故，Metro 捆绑器能够协调某些东西，但 Android Studio 的捆绑器不能。

由于 Android Studio 的 APK 生成器使用它的原生 javascript 捆绑器，我需要弄清楚为什么会发生这种情况，并修复它。

我尝试过 - 清除缓存、删除项目、使缓存无效、守望者等 - 添加实现（“com.facebook.react:react-native:0.61.5”）{force = true}（在 build.gradle 中） - 许多在堆栈溢出时发现此错误消息的其他解决方案...

2天就这样。不知道。

截屏

我正在运行一个反应本机应用程序并不断遇到应用程序未连接到代码以进行自动更新的问题。

我尝试过的事情：

• 通过以下命令重新加载 main.jsbundle：npx react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios/assets
• 从我的计算机中完全删除节点并做出本机反应
• 重新启动我的电脑
• 在物理设备上运行并在模拟器上运行
• 在 Xcode 中清理派生数据

这是启动屏幕，提供“连接到 Metro 以开发 JavaScript”的建议。

在自动启动的 Metro 捆绑器中，当我输入“r”重新加载时，我收到这条消息，上面写着“React Native：没有连接应用程序”。

我使用的是 0.61，而且一直都是。

我还应该尝试什么？

编辑

我能够通过（再次）重新启动计算机来使其工作。

每隔一段时间，重新启动就可以解决问题，但大多数时候它不起作用。仍然必须有一种更可靠的方法来解决这个问题。

我有一个包含组件路径的 path.json 文件

我想在本机反应中动态加载'./login/index.js'文件并渲染这个特定文件

我目前的实现

我收到以下错误：

第 7 行的无效调用：import("" + componentPath)

我在使用时遇到错误react-native start，捆绑程序错误是：

自从我安装了这个错误react-native-camera，我不知道这是否是真正的问题。我试过做rm -rf node_modules/ && yarn install && react-native start -- --reset-cache，但没有奏效。这是我的顶级build.gradle文件：

这是我的app level build.gradle：

描述：

我正在尝试将我的应用程序从 RN 0.55 升级到最新的稳定 RN 版本 0.61.5，一切正常，直到我在我的 RN 项目中添加共享模块。我在项目中使用打字稿。

下面是我的项目的结构

错误是“无法从'../SharedLib/dist/Handler/CacheHandler.js'中解析模块'@babel/runtime/helpers/interoprequirewildcard'的行：@babel/runtim/helpers/interopRequireWildcard 无法在其中找到该项目'。

反应原生版本：

下面是我的 package.json （注意：为了便于阅读，我删除了不相关的依赖项）

Metro.config.js

babel.config.js

从 typescript 转译后的 CacheHandler.js 文件，如果需要会产生错误

我知道这一定与 babel 配置有关，因为我已经安装了 @babel/runtime 并检查了我的 node_modules 上确实有 interopRequireWildcard.js 文件，我尝试了互联网上可用的几个选项但没有运气，其中一些不是完全相同的问题但也与 babel 运行时相关，所以值得一试

https://github.com/airbnb/babel-preset-airbnb/issues/56

https://github.com/facebook/react-native/issues/27712

https://forums.expo.io/t/unable-to-resolve-module-module-babel-runtime-helpers-interoprequirewildcard-js/27806/3

请在 rn github 问题上查看我附加的图像，我无法附加图像，因为 stackoverflow 还是新手https://github.com/facebook/react-native/issues/28317#event-3131781625

当我尝试在 ios 或 android 上运行我的 react-native 应用程序时，Metro Bundler 会引发一个错误，提示我没有安装http模块。

我已经尝试过npm react-native install http并且它安装正确但是当我上传应用程序时会出现这个错误：

错误：捆绑失败：错误：尝试http从文件解析模块时，成功找到/node_modules/express/lib/application.js了包。node_modules/http/package.json但是，此包本身指定了一个main无法解析的模块字段（node_modules/http/index.js.

根据文档，我正在尝试使用 Mobx 的优化 es6 构建：

提示：MobX 5 包的主要入口点附带 ES5 代码，以向后兼容所有构建工具。但是由于 MobX 5 无论如何只能在现代浏览器上运行，请考虑使用更快更小的 ES6 构建：lib/mobx.es6.js。例如通过设置 webpack 别名：resolve: { alias: { mobx: __dirname + "/node_modules/mobx/lib/mobx.es6.js" }}

https://mobx.js.org/README.html#browser-support

这允许我导入mobx并获取mobx.es6.js构建：

这对于基于 Webpack 的项目非常有用，例如 Electron 项目，我已经在其中工作了。

对于 React Native，我可以extraNodeModules这样指定metro.config.js：

...除了那不起作用，我认为，因为mobx依赖项可以自行解决，因此永远不会检查此配置选项。

我可以为 使用单独的别名mobx，例如，mobx-es6但这并不理想，说得很好：

是否有其他方法可以配置 Metro，以便我可以mobx像使用 Webpack 一样覆盖导入？

我正在使用 RN 0.60.0。

我正在尝试创建一个 React Native Web 项目。

我之前已经构建了几个 React Native 应用程序，但从未尝试将一个放在 Web 上。

我最大的问题是启动网络时本地库之间的不兼容——这不是一个意外的问题。

无论如何，我的目标是能够在原生平台上加载原生库，并让替代库在网络上做同样的事情。

例如，我收到当前错误：

我将如何解决这个问题？这个库理论上与 React Native Web 兼容，但我得到了上述错误。

这个加载器会在 Babel 中吗？地铁？网络包？

我有一个看起来像这样的 babel.config.js：

我有一个看起来像这样的地铁：

这是我的 webpack：

我真的很迷茫如何设置 Webpack，或者我应该如何使用这些文件来摆脱上述错误。

我在哪里添加错误询问的加载程序？

抱歉，如果这是一个令人困惑的问题 - RN 的这一部分对我来说是全新的