问题标签 [metro-bundler]

我的 react-native 开发环境是在 Windows 7 上；直到昨天都可以正常工作，但是 APK 在加载捆绑包后突然报告错误。

错误消息：

我为错误做了谷歌，但没有运气。我尝试使用清除缓存npm start -- --reset-cache，但错误仍然存​​在。我发现并尝试了类似的帖子，但他们的解决方案也不起作用。

错误日志：

编辑：我已经从上面的日志中排除了与修复错误时相同的部分。

运行 react-native run-ios 并打开模拟器时，应用程序只是不断重新加载。在 Metro bundler 中，我一遍又一遍地收到“警告错误：未打开”。

有时应用程序会再次稳定下来，我可以继续开发，但如果我再次重新加载，它可能会再次循环 20-30 次。

有时它会以 100% 的速度卡在“正在下载 Javascript 包”加载屏幕上，然后当我重新加载它时，它是同一个故事。

有时应用程序崩溃...

我曾尝试回到之前没有不断重新加载但无济于事的状态。

仅在使用 Live Reload 时似乎会发生这种情况。但我宁愿实时重新加载而不是手动重新加载。

有谁知道为什么会发生这种情况，并有解决方案？

当我在 xcode 中运行 react native 项目时，出现以下错误。Metro bunlder 由于某种原因失败了。

这是在启动的终端窗口中显示的错误。

该项目过去可以正常工作，但没有运行失败。

我们有一个大型 react-native 应用程序，并希望将此应用程序扩展为网站和 chrome-extension，该网站和 chrome 扩展程序使用我们移动应用程序中的相同 reducer、sagas 和一些组件（使用 react-native-web）。chrome 扩展和网站基本上是移动应用程序的一个子集。

想法是设置构建系统以在单个 repo 中构建这些平台，例如，如果我们运行npm run build-chrome-extension它将 react 扩展构建到一个名为的根文件夹中，该文件夹将与and文件夹/extension位于同一目录中，文件夹也是如此。/ios/android/web

为了实现这一点，我们将使用react-native out-of-tree 平台，然后使用文件扩展名来提供正确的代码，CheckoutScreen.website.js为网站提供结帐屏幕。

问题是，我们如何设置构建系统来实现这一点？如果我们想使用 Gatsby 构建网站，并为 chrome-extension 创建-react-app。

将我的 React Native 应用程序更新到最新版本 ( 0.60.4) 后，使用启动我的应用程序react-native run-ios将导致我的应用程序在没有 Metro Bundler 的情况下启动。

然后应用程序将显示以下错误：

为了让我的应用程序正常运行，我需要使用启动 Metro Bundlernpm start然后运行react-native run-ios​​.

尽管这是一种解决方法，但以前我没有遇到此问题，只需运行即可react-native run-ios自动启动 Metro Bundler。我该如何解决这个问题？

编辑：我NSAppTransportSecurity来自Info.plist：

我正在尝试使用 Metro 为我的 react 本机项目添加多个解析器和转换器，如何将它们组合到我的 metro.config.js 文件中？

背景：我想让一个 sass 变压器和一个 svg 变压器都能工作。

我已经分别尝试了这些配置，这似乎可行，但我对如何组合它们感到困惑，因此它们都可以同时工作。我假设它们需要在同一个 module.exports 中，因为当它们都在同一个文件中时，我的 svg 会出现错误

这些是我试图结合的配置：

当我尝试使用上面的代码运行它时，即 metro.config.js 中的两个模块导出，似乎只有 sass 转换器工作，当我尝试绘制 svg 时，出现以下错误：

我真的不知道为什么我编译的 apk 试图到达 metor 服务器

我正在使用 react-native 创建一个 iOS / android 应用程序

构建之前工作

产生于android/app/build/outputs/apk/release

Metro 捆绑器可以解析依赖关系图（应用程序在模拟器中启动），但无法解析任何资产，因此应用程序中的所有图像都丢失了。

只有在我从 react-native@0.57 升级到 0.59 后才会出现此问题

^^^ 问题出现在导航到包含<Image source=... />

该模块my-assets确实存在并包含所需的所有资产

开始：node node_modules/react-native/local-cli/cli.js start --reset-cache --projectRoot artifacts

artifacts包含.js从_.ts

我的文件结构看起来像这样

捆绑器服务器输出

Metro.config.js

依赖项：

我还尝试在浏览器中转到 url，但也为以下两个请求转到 404

- 更新 -

清理缓存和删除 $TMPDIR 无济于事

我对 Expo 和 React-Native 的机制以及它们如何下载资产感到困惑。

我知道的信息是，一旦你构建了你的代码，expo 就会准备一个包含 javascript（编译代码）和资产的包。

在调试会话期间，该捆绑包（作为一个整体）首先由 expo 客户端下载，然后启动应用程序。这意味着一旦应用程序启动，代码中“导入”的所有资产都应该到位。

另一方面，当我运行以下原子测试代码时，情况完全相反。加载这些资产需要时间，就好像它们是“延迟加载”一样。

所以我的问题是；是行为开发模式相关还是在生产模式下下载图像仍然需要时间？

• 如果生产模式的行为相同，那么它将从哪里下载资产？
• 如果生产模式与开发模式不同，为什么开发模式的行为会有所不同？

代码可以看这个零食：https ://snack.expo.io/@mehmetkaplan/assetdownloadtest

如果您在手机中运行此代码，您很可能会发现动画 gif 不会轻易更改。但是如果你通过网络运行它，它会更快地改变。

世博会文件在这里说：

对于保存到本地文件系统的图像，使用 Asset.fromModule(image).downloadAsync() 下载并缓存图像。还有一个 loadAsync() 辅助方法来缓存一批资产。

这也与上面的问题有关，如果图像在本地文件系统中，为什么我们需要缓存它？

世博会论坛也添加了相同的问题，可以在此处看到。将两者联系起来，以便未来的访问者可以找到任何可能的答案。

I want to use 'react-native-image-picker' in my application. After importing and following the install instructions from the github instructions. I get a metro bundler crash on run. It can't seem to locate the 'react-image-picker' or it's dependencies?

I have tried initializing a new project and ONLY installing image picker. I have tried running 'react-native link' and 'react-native link react-native-image-picker' in the root. I have tried initializing the project with expo. I've checked the directories that Metro claims are missing, and they look good to me.

error: bundling failed: Error: While trying to resolve module react-native-image-picker from file /Users/owenmorris/Documents/GitHub/fecebook/App.js, the package /Users/owenmorris/Documents/GitHub/fecebook/node_modules/react-native-image-picker/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/react-native-image-picker/src/index.ts. Indeed, none of these files exist:

• /Users/owenmorris/Documents/GitHub/fecebook/node_modules/react-native-image-picker/src/index.ts(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
• /Users/owenmorris/Documents/GitHub/fecebook/node_modules/react-native-image-picker/src/index.ts/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx) at ResolutionRequest.resolveDependency (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:65:15) at DependencyGraph.resolveDependency (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/node-haste/DependencyGraph.js:283:16) at Object.resolve (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/lib/transformHelpers.js:264:42) at /Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31 at Array.map () at resolveDependencies (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18) at /Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33 at Generator.next () at asyncGeneratorStep (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24) at _next (/Users/owenmorris/Documents/GitHub/fecebook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:107:9) BUNDLE [ios, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.