反应原生，捆绑失败

Posted 2023-02-22

【中文标题】反应原生，捆绑失败

【英文标题】：react-native, bundling failed

【发布时间】：2018-12-06 15:55:43

【问题描述】：

我是 react-native 的新手，发现了一个对我来说完全没有意义的错误。

我正在尝试包含一个日历库：https://github.com/wix/react-native-calendars

我已在我的 package.json 文件中包含该库的依赖项并运行 npm install

项目运行良好，符合预期。我只是在项目中添加了一行代码：

import  Calendar, CalendarList, Agenda  from 'react-native-calendars';

没有别的了。但是现在，当应用程序在设备上加载时，我收到一条红色错误消息，这就是我的控制台所说的：

错误：捆绑失败：错误：尝试解析模块时xdate 从文件 /Users/Alex/Documents/workspace/mobile/node_modules/react-native-calendars/src/index.js, 包裹 /Users/Alex/Documents/workspace/mobile/node_modules/xdate/package.json 被成功找到。然而，这个包本身指定了一个 main 无法解析的模块字段 (/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js. 事实上，这些文件都不存在：

* /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)

* /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json) 在 ResolutionRequest.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15) 在 DependencyGraph.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579) 在 dependencies.map.relativePath (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19) 在 Array.map() 在 resolveDependencies (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16) 在 /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33 在 Generator.next () 在步骤（/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313） 在 /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473 在

但是我检查了目录，实际上 /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js 确实存在。但是我没有看到这部分： (.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`

至于 /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index 如何存在，这是没有意义的，因为 xdate. js 不是目录。

有什么帮助吗？

【问题讨论】：

停止打包程序并使用 react-native start

再次运行它

【参考方案1】：

只需重新启动捆绑程序 - 无需删除 Node Modules 文件夹

我在 Linux Mint 上使用 VS Code 和 android Studio 模拟器时添加和使用 react-native-elements 时遇到了这个问题

在 VS Code 中，我有一个终端通过“npm start”命令运行带有 Metro Bundler 的 Expo。在文件夹中安装 react-native-elements（使用'npm install --save react-native-elements'）并将导入添加到 .js 文件中后，我得到了“但是，这个包本身指定了一个主无法解析的模块字段”错误。

在我的例子中，这只是在终端会话中使用 ^C 来停止 Metro 捆绑程序，然后再次运行“npm start”。根本不需要删除节点模块文件夹。

【参考方案2】：

如果有人有同样的问题，删除 node_module 不起作用。然后你可以尝试删除所有node_module，包锁并使用yarn来安装node_module而不是npm。希望对您有所帮助

【参考方案3】：

请不要删除节点模块文件夹。 捆绑器最少需要处理节点模块文件夹。

而是关闭所有终端。如果使用 VS-code 也关闭它。

关闭所有本地主机服务器端口，如果可能，重新启动系统。 这可能会解决问题。

【参考方案4】：

如果您在删除./node_modules 文件夹并再次运行npm install 后仍然收到错误消息，请尝试使用--update-binary 标志进行安装，即npm install --update-binary。这应该清除并重建您机器上任何以前构建的包。

【参考方案5】：

首先关闭您的 javascript 捆绑器（在我的例子中是 Metro 捆绑器）并重新启动应用程序。这将创建新的依赖关系图。这应该可以解决问题。

【讨论】：

这是正确的答案，因为问题在于捆绑器创建的依赖关系图，与 node_modules 文件夹无关。

这对我来说是完美的答案。我使用 GIT 并在分支之间切换。因此，请确保在切换分支之后（如果需要通过 yarn/npn 或 pod 安装新组件）...关闭在后台打开的终端窗口（带有标题“Metro-Bundler”） .然后再次点击 Xcode 中的“构建”按钮。之后它再次为我工作，没有任何错误。

RN 0.63.3 确认可以工作。好奇这是唯一可以找到合理答案的地方。谢谢！ PS。在此版本中，您将收到无法解析“main”字段中的 FS.common.js 的消息。

如果您使用的是 mac，请从 mac 注销，然后运行 ​​npm install，然后运行 ​​npm run start --reset-cache。试一试，我什么都试过了，除了这个。可能是打包程序本身的一些缓存问题。无需删除node_modules。

【参考方案6】：

如果您在打包程序打开时尝试安装模块，通常会发生这种情况。

尝试删除node_modules文件夹并关闭packager。 然后通过npm install在你的项目目录中重新安装所有东西。

【讨论】：

我已经通过关闭打包程序解决了bundling failed referenceerror module not registered in graph。谢谢

如何关闭打包程序？

在 CLI 中按 Ctrl+C 以关闭 Packager 或 NPM。您还可以在 Windows 中使用“taskkill /f /im node.exe”，在 Linux 中使用“killall -9 node”

与 fs 有类似问题，未解决。

我的项目中安装了许多库。每次我做npm install 时，我都必须再次手动链接到一些库来解决一些问题。也许有一种方法可以保存以前的库链接设置，但如果没有这个选项，npm install 对我来说就是一场噩梦。