react-native, bundling failed

Question

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

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

I have included the dependency for that library in my package.json file and run 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 xdate from 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.json was successfully found. However, this package itself specifies a main module 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

However I have checked in the directory and in fact /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js does exist. However I do not see any of this part: (.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/index can exist, that doesn't make sense because xdate.js is not a directory.

Any help?

Solution 1

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

Try to delete node_modules folder and close the packager. Then reinstall everything by npm install in your project directory.

Solution 2

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.

Solution 3

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

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

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.

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.

Solution 4

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

Solution 5

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.

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

View more solutions