RangeError [ERR_FS_FILE_TOO_LARGE]: File size is greater than 2 GiB

Fixing Metro Bundler Error: "RangeError [ERR_FS_FILE_TOO_LARGE]" in React Native


ERR_FS_FILE_TOO_LARGE


Introduction

If you're working on a React Native project and encounter the error:

Failed to construct transformer:  RangeError [ERR_FS_FILE_TOO_LARGE]: File size (2336024881) is greater than 2 GiB

This error occurs due to Metro Bundler attempting to process a file that exceeds the 2 GiB limit. This is often caused by corrupted cache files or issues with Watchman. In this article, we'll discuss why this happens and how to resolve it.


RangeError [ERR_FS_FILE_TOO_LARGE]


Understanding the Error

The Metro Bundler is responsible for transforming and serving JavaScript code to the React Native application. If it encounters a file that exceeds its processing limit, it throws a RangeError [ERR_FS_FILE_TOO_LARGE] error.

Common causes include:

  • Corrupted or excessive cache files

  • Issues with Watchman, the file-watching service used by Metro

  • Large log files or node modules being misread

Solution

To resolve this issue, run the following command in your terminal:

watchman watch-del-all && rm -rf $TMPDIR/metro-* && npm start -- --reset-cache

Explanation of the Commands

  1. watchman watch-del-all: Clears all watchman subscriptions, which can help resolve file-watching issues.

  2. rm -rf $TMPDIR/metro-*: Removes temporary Metro cache files that may be causing the issue.

  3. npm start -- --reset-cache: Starts the Metro Bundler while clearing its cache, ensuring a fresh build.

Additional Troubleshooting Steps

If the issue persists, try the following:

  1. Clear npm cache:

    npm cache clean --force
  2. Delete and reinstall node_modules:

    rm -rf node_modules package-lock.json && npm install
  3. Ensure Watchman is installed (Mac users):

    brew install watchman
  4. Restart your system to clear any lingering issues.

Conclusion

By running the above commands, you should be able to resolve the RangeError [ERR_FS_FILE_TOO_LARGE] error in your React Native project. If issues persist, consider checking your project’s dependencies and logs for unusually large files that may need to be removed. Happy coding!