The most popular React Native framework has released React Native version 0.72, with the introduction of beta support for the package.json “exports” field in Metro (JavaScript build tool). It provides a wide range of advantages, such as:

• Improved compatibility with a wide range of npm packages.
• New capabilities in API definitions for packages targeting React Native.
• Advanced functionalities for multi platform

The release of package exports is an essential step toward building a more compact and feature-rich React Native ecosystem.

This comprehensive guide on package exports support in React Native will provide you with a detailed understanding of the concept of package exports, along with features and encapsulation in React Native.

What is Package Exports?

The Package Exports feature was released with the introduction of Node.js 12.7.0, which serves as a modern mechanism to specify entry points within npm packages. More precisely, the entry points represent the mapping of package subpaths in the npm packages with the streamlined import process for external use.

By utilizing the “exports” field in the package.json file, we can easily map package subpaths to their file locations, facilitating seamless integration of the React Native project with the broader JavaScript ecosystem and a standardized set of features for multiplatform packages to target React Native.

The “exports” provides an alternative to “main” to specify multiple entry points with enhanced functionalities. We can use “exports” alongside or instead of “main” in a package.json file.

Enabling Package Exports

The Package Exports support in React Native is still in development, but if you want to use it for beta testing, then you need to enable it from your apps “metro.config.js” file. You can use the resolver.unstable_enablePackageExports option to allow the Package to Exports.

To enable the Package Exports feature, you need to paste the below code snippet inside your metro.config.js file:

const config = {
  // ...
  resolver: {
    unstable_enablePackageExports: true,
            },
            };

You need to manually enable package export in Metro, but in future releases of Metro, this option will become true by default.

Code Example of Package Exports

When writing a new package or specifying a single entry point, you can use the “exports” field like the code example below:

{
  "exports": "./index.js"
}

But when you are working with multiple subpaths in the package.json, then custom subpaths can be defined along with the main entry point as “.” subpath. The below code syntax demonstrates how you can add multiple entry points along with the main entry point:

{
  "exports": {
    ".": "./index.js",
    "./utils": "./dist/utils.js",
  }
}

The consumer can import only defined subpaths, and importing others will lead to the error. Let’s see a complete example of the use of “exports” in the package.json file:

{
  "name": "code-example-package-exports",
  "version": "1.0.0",
  "main": "dist/main.js",
  "exports": {
    ".": {
      "node": "./dist/main.js",
      "import": "./dist/main.mjs",
      "default": "./dist/main.js"
    },
    "./secondary": {
      "node": "./dist/secondary.js",
      "import": "./dist/secondary.mjs",
      "default": "./dist/secondary.js"
    },
    "./package.json": "./package.json"
  }
}

In the above code example:

• The “code-example-package-exports” is the package name.
• The version field represents the version “1.0.0”.
• The “main” field is used to specify the entry point for the package, which is “dist/main.js“.
• Where the “exports” field is used to specify various subpaths for different components of the package.

The above export field contains various subpath structures, so let’s understand each of them:

1. “.”:- This file location represents the main export or entry point that contains the below paths:
   • “node”: “./dist/main.js” – Specifies the main entry point for the node environment.
   • “import”: “./dist/main.mjs” – Specifies the main entry point for the import environment.
   • “default”: “./dist/main.js” -specifies the default main entry point.
2. “./secondary”:- This represents the additional component named “secondary,” which also contains different locations for node, import and default environments.
3. “./package.json”: “./package.json“:- This entry point is used to specify the file location to access and import the package.json file.

The above code example demonstrates the implementation and working of the package exports support in React Native. However, you can modify the paths and file names according to your project requirements and structure, and you can also add subpaths as much as you want, depending upon your project requirements.

Package encapsulation is lenient

The concept of “Package encapsulation is lenient” refers to the backward compatibility approach used by the Metro build tool to deal with the subpaths that are not defined in the “exports” field of a package.
When Metro encounters a subpath that is not listed in the “exports” field of a package, it will fall back to legacy resolution. This means the package can be accessed consistently with the old behaviours without triggering an error. Instead, it will log the warning message to inform developers about the problem.
The warning message below will be logged instead of triggering an error:

warn: You have imported the module "pages/webdotpage/page.js" which is not listed in
the "exports" of "pages". Consider updating your call site or asking the package
maintainer(s) to expose this API.

This functionality is designed to reduce friction for existing React Native projects and their import with the presence of “export” functionality.

‎Benefits of Package Exports

The new functionality Package Exports offers a wide range of benefits:

• Package encapsulation: It allows greater control and accessibility over the specific subpaths because only defined subpaths in the “exports” can be imported from outside, allowing maintainers to set clear boundaries for their public API and enhancing security.
• Subpath aliases: This allows custom subpath definitions so that we can relocate files while preserving the public packages API.
• Conditional exports: This allows subpaths to be conditionally resolved based on the target runtime, such as “node,” “browser,” or “react-native.”

Conclusion

In this article, we covered the Package Exports support in React Native, which provides advanced functionality to specify and handle the entry points within the package. It allows developers to use “exports” fields to specify the multiple entry points within the package.

Package exports is still in development, and you can now use it by enabling the resolver.unstable_enablePackageExports option in the “metro.config.js” file. We have also included code examples for implementation and working on the “exports” field and the benefits of package exports.