React Native Blog

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.

Continue reading

What This Article Covers

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.

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

This page summarizes “Package Exports Support in React Native” by React Native Blog, published Jun 21, 2023. All credit for the original work goes to the authors.

Read the original on reactnative.dev (opens in new tab)

AI tools for React Native

Browse all AI tools →