[Bug]: Published package can't be resolved by Node's ESM resolver

[TrevorBurnham]

Browser

No response

Package version

v3.0.1352

React version

No response

Description

Many of the subpaths declared in @cloudscape-design/components' exports subpath fail to load under Node's ESM resolver. Example:

$ node -e "import('@cloudscape-design/components/button')"
ERR_UNSUPPORTED_DIR_IMPORT: Directory import '.../components/internal/base-component'
is not supported resolving ES modules imported from '.../components/button/index.js'

This issue isn't observed in most bundlers (including Vite in its default configuration) because they use their own, more forgiving ESM resolver. But if you run vite build --ssr, dependencies are externalized and handed to Node at runtime, triggering the error.

There are three separate root causes:

1. Emitted relative specifiers omit the extension. 2,880 of 3,764 relative specifiers in the emitted .js are extensionless: 925 name a directory (needing /index.js), 1,955 name a file (needing .js), and 0 are unresolvable or ambiguous. Node's ESM resolver doesn't probe extensions and has no directory-index fallback.
2. .css imports. The 229 emitted *styles.css.js import './styles.scoped.css', and Node has no loader for .css.
3. theming-runtime has three extensionless directory imports in browser/index.js, which is the ./theming subpath.

Previous related discussion: #1768

Source code

No response

Reproduction

You can recreate this in the CLI:

mkdir esm-repro && cd esm-repro && echo '{"type":"module"}' > package.json
npm i @cloudscape-design/components react react-dom
node -e "import('@cloudscape-design/components')"

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[SpyZzey]

Hey Trevor,

Thanks for reaching out. We'll take a look at the proposed PRs.