Javascript 反应原生，捆绑失败

react-native, bundling failed

提问by Alexander C

I am new to react-native and have found an error that makes absolutely no sense to me.

我是 react-native 的新手，发现了一个对我来说毫无意义的错误。

I am trying to include a calendar library: https://github.com/wix/react-native-calendars

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

I have included the dependency for that library in my package.jsonfile and run npm install

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

The project was running fine and as expected. I have simply added one line of code to the project:

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

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

Nothing else. However now I am getting a red error message when the app loads on device and this is what my console is saying:

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

error: bundling failed: Error: While trying to resolve module xdatefrom file /Users/Alex/Documents/workspace/mobile/node_modules/react-native-calendars/src/index.js, the package /Users/Alex/Documents/workspace/mobile/node_modules/xdate/package.jsonwas successfully found. However, this package itself specifies a mainmodule field that could not be resolved (/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js. Indeed, none of these files exist:

* /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)at ResolutionRequest.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15) at DependencyGraph.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579) at dependencies.map.relativePath (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19) at Array.map () at resolveDependencies (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16) at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33 at Generator.next () at step (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313) at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473 at

错误：捆绑失败：错误：尝试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) at Array.map () at resolveDependencies (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16) at /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 at

However I have checked in the directory and in fact /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.jsdoes exist. However I do not see any of this part: (.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`

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

As to how /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/indexcan exist, that doesn't make sense because xdate.jsis not a directory.

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

Any help?

有什么帮助吗？

回答by Sarmad Shah

It Usually happens if you try to install a module while your packager is open.

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

Try to delete node_modulesfolder and close the packager. Then reinstall everything by npm installin your project directory.

尝试删除node_modules文件夹并关闭packager. 然后npm install在您的项目目录中重新安装所有内容。

回答by Sachin Poreyana

First close your JavaScript bundler (Metro bundler in my case) and restart the application. This will create fresh dependency graph. This should solve the issue.

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

回答by Raymond Lemon

If you're still getting the error even after deleting the ./node_modulesfolder and running npm installagain, try doing the install with the --update-binaryflag, i.e npm install --update-binary. This should clear out and rebuild any previously built packages on your machine.

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

回答by Rishav Kumar

Please don't delete the node modules folder. The bundler has least to deal with node modules folder.

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

Instead close all the terminals. If using VS-code close that also.

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

Close all the local host server ports and if possible restart the system. This might solve the issue.

关闭所有本地主机服务器端口，并在可能的情况下重新启动系统。这可能会解决问题。

回答by Beo Stepens

If anyone have same issue, and remove node_module not working. Then you can try remove all node_module, package lock and using yarn to install node_module instead npm. Hope this help

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

回答by Mark Allen

Just restart the bundler - no need to delete the Node Modules folder

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

I came across this issue when adding and using react-native-elements when using VS Code and Android Studio emulator on Linux Mint

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

In VS Code I had a terminal running Expo with Metro Bundler via 'npm start' command. After installing the react-native-elements in the folder (using 'npm install --save react-native-elements') and adding the import into the .js file I got the "However, this package itself specifies a main module field that could not be resolved" error.

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

In my case, this just involved a ^C in the terminal session to stop the Metro bundler and then running 'npm start' again. There was no need to delete the node modules folder at all.

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