React Native Blog Jun 21, 2023

Package Exports Support in React Native

Article Summary

React Native just closed a major compatibility gap with the JavaScript ecosystem. Metro now supports Package Exports, unlocking 16,600+ npm packages that were previously broken or inaccessible.

The React Native team shipped beta support for the package.json 'exports' field in Metro bundler with version 0.72. This modern Node.js standard (used by Firebase, Storybook, and thousands of other packages) gives developers better control over package APIs and enables proper React Native for Web support without workarounds.

Key Takeaways

Critical Insight

React Native apps can now work with significantly more npm packages out of the box while package maintainers gain standardized tools to define public APIs and target multiple platforms.

The implementation includes a clever backwards compatibility feature that other bundlers don't offer, making migration surprisingly smooth for existing projects.

About This Article

Problem

React Native projects couldn't use conditional exports for platform-specific code. Packages like Firebase and Storybook had to work around Metro's lack of support for the 'exports' field in package.json files.

Solution

Meta's React Native team added spec-compliant Package Exports resolution to Metro. They introduced the unstable_enablePackageExports configuration option along with unstable_conditionNames and unstable_conditionsByPlatform resolver settings.

Impact

App developers can now check how resolution changes work across platforms using the metro get-dependencies command. Metro logs warnings instead of errors when it finds unlisted subpaths, which helps maintain backwards compatibility while the feature is in beta.