Add exports field in package.json

[gdiazdelaserna]

TL;DR

Fixes the issue mentioned here: #4859

Description

Issue

Consuming a React Select subpath from a JS module in a project using Webpack 5, throws an error saying the path in the import statement is not fully specified.

Context

Webpack 5 introduced a default behavior that requires all import statements in JS modules to be fully specified.

Importing a React Select subpath (e.g. import Creatable from 'react-select/creatable') is breaking that rule. Webpack 5 thinks that import statement is trying to import a file with a missing extension.

Solution

Inform Webpack that the subpaths are not file imports (and an extension shouldn't be required) by declaring an exports field in package.json.

The exports field is documented in these two places:

• Node
• Webpack

The new exports field includes all the subpaths mentioned in React Select's documentation. All other subpath imports will fail from now on.

Each subpath declared in the exports field includes 3 different file system paths to satisfy the different environments that might consume them:

• require: Will be used by environments using the require keyword to import files (e.g CommonJS)
• import: Will be used by environments using the import keyword to import files (e.g. ES Modules)
• types: Will be used by TypeScript to query type definitions

[changeset-bot]

🦋 Changeset detected

Latest commit: c187990

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
react-select	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c187990:

Sandbox	Source
react-codesandboxer-example	Configuration

[Rall3n]

@gdiazdelaserna Has this been tested with webpack and vite?

[gdiazdelaserna]

@Rall3n

I have tested this change in multiple environments. I created this repo to show how this has been tested:

https://github.com/gdiazdelaserna/react-select-exports-field-test

As you can see, I tested this in:

• Create React App
• Next.js
• Vite
• Webpack

This proves that:

• React Select continues to work correctly in all those environments (i.e. there are no regressions)
• The PR fixes the issue it intends to fix: React Select subpath imports now work correctly when consumed from a JS module in a Webpack 5 app

Here's a screenshot of the 4 apps running correctly:

[davbrito]

This change makes impossible to add custom select props as mentioned on the docs when using the new "bundler" moduleResolution of Typescript 5

[davbrito]

As a workaround I put the path to the file on node_modules