Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.