Not able to import /async, /creatable, .etc from an ES module

[srmagura]

Minimal repro

If placed in an .mjs file, the following code results in an error.

import AsyncSelect from "react-select/async";

console.log(AsyncSelect);

internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'C:\Projects\OSS\Bugs\react-select-esm-repro\node_modules\react-select\async' is not supported resolving ES modules imported from C:\Projects\OSS\Bugs\react-select-esm-repro\index.mjs
Did you mean to import react-select-esm-repro/node_modules/react-select/async/dist/react-select.cjs.js?
    at finalizeResolution (internal/modules/esm/resolve.js:281:17)
    at moduleResolve (internal/modules/esm/resolve.js:708:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:819:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:73:40)
    at link (internal/modules/esm/module_job.js:72:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///C:/Projects/OSS/Bugs/react-select-esm-repro/node_modules/react-select/async'
}

While this reproduction uses Node, the issue also occurs when using Webpack 5 which follows Node's handling of ES module imports. Here's the Webpack error for Googleability:

Module not found: Error: Can't resolve 'react-select/async' in 'C:\Projects\ITI\iti-react\iti-react\dist'
Did you mean 'react-select.esm.js'?
BREAKING CHANGE: The request 'react-select/async' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Suggested Solution

Utilize the exports field in package.json as described in the Node documentation.

Additional Context

• react-select version: 5.1.0
• Node version: 14.17.6

[ebonow]

@srmagura would you be willing to put together a PR for this?

[srmagura]

Sure, I can do that this weekend.

One thing to note is that this change will prevent consumers from importing from "unofficial" entry points. For example, the following hypothetical import will error:

import { Blah } from 'react-select/dist/some/internal/module.ts'

Only imports from the following will work:

"react-select"
"react-select/base"
"react-select/animated"
"react-select/async"
"react-select/creatable"
"react-select/async-creatable"

Is this okay?

(I would guess you can still do type-only imports from other entry points, but I'm not sure.)

[ebonow]

Let me get some thoughts from Jed and some of the other collaborators in case I am missing something in this approach. I'll try to follow up by Friday.

[ebonow]

Just had a meeting with Jed and would be grateful and willing to accept a PR that would address this.

[srmagura]

Hey @ebonow, I made an attempt at this but I am unable to get even the most basic case to work...

I added this to the react-select/package.json:

"exports": {
    ".": "./dist/react-select.esm.js",
},

With this change in place, the following will fail if placed in an .mjs file:

import Select from 'react-select'

Node will resolve react-select to node_modules/react-select/dist/react-select.esm.js. The issue is that Node thinks this is a CommonJS module since the extension is .js and react-select/package.json does not specify "type": "module". So Node throws an error on line 1 because it sees an import statement in a CommonJS module.

I think you need to publish your ES modules with the .mjs extension for this to work. Is that possible, or is it a nonstarter?

Oh, and here is the repository I created to test this out: https://github.com/srmagura/react-select-exports-test

[ebonow]

I don't suspect we'd want to introduce any breaking changes. I'll bring this up for further discussion and do some more investigation.

[AlonsoLucasls]

Hello guys, Any news about this?

[LucianoRochaDev]

Hello there, we need some help here! Same problem...

[gdiazdelaserna]

I created the PR above to address this issue. Want to take a look @ebonow?

@srmagura was on the right track, but his solution was missing the conditions to be able to support both CJS and ESM environments (as well as TS).

"exports": {
  ".": {
    "require": "./dist/react-select.cjs.js",
    "import": "./dist/react-select.esm.js",
    "types": "./dist/react-select.cjs.d.ts"
  },
  "./base": {
    "require": "./base/dist/react-select-base.cjs.js",
    "import": "./base/dist/react-select-base.esm.js",
    "types": "./base/dist/react-select-base.cjs.d.ts"
  },
  ...
}

I tested the solution in the PR in a Webpack 5 environment and it works correctly.

[w-a-t-s-o-n]

I ran into this issue on version 5.7.0 when using the react-select/creatable library. I can confirm that upgrading to 5.7.2 fixed this issue for me!

[aashishsingla567]

I am having the same issue in version 5.7.3, 5.7.2 and 5.7.1,
In 5.7.0 I am able to explicitly import the .cjs files and use the default-imports module to consume them.

Like this -

import _AsyncCreatableSelect from "react-select/async-creatable/dist/react-select-async-creatable.cjs.js";
import _AsyncSelect from "react-select/async/dist/react-select-async.cjs.js";
import _CreatableSelect from "react-select/creatable/dist/react-select-creatable.cjs.js";

const AsyncCreatableSelect = defaultImport(_AsyncCreatableSelect);
const AsyncSelect = defaultImport(_AsyncSelect);
const CreatableSelect = defaultImport(_CreatableSelect);