Generated ESM module is missing the Icons and Spots namespaces

[mjpieters]

The generated index.esm.js file lacks namespaces and conflicts with the typescript definitions.

The distributed module contents only define the names found inside the icons and spots modules, which then are all exported as is. Because of this, you can't actually use import { IconFaceMindBlown } from "@stackoverflow/stacks-icons/icons"; as the documentation claims.

Instead, you get an error:

index.ts:1:35 - error TS2307: Cannot find module '@stackoverflow/stacks-icons/icons' or its corresponding type declarations.

1 import { IconFaceMindBlown } from "@stackoverflow/stacks-icons/icons";
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can't simply use import { IconFaceMindBlown } from "@stackoverflow/stacks-icons"; as the type information tells typescript that at that level only Icons and Spots are available.

To reproduce, in an empty directory create the following three files:

package.json

{
  "name": "mcve",
  "dependencies": { "@stackoverflow/stacks-icons": "^5.3.1" },
  "devDependencies": { "typescript": "^4.9.5" },
  "scripts": { "build": "npx tsc" }
}

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "ES2020"
  },
  "files": ["index.ts"]
}

index.ts

import { IconFaceMindBlown } from "@stackoverflow/stacks-icons/icons";
export { IconFaceMindBlown }

then run

npm install && npm build

[mjpieters]

Just to be clear: I am nowhere near confident that my diagnosis is correct.

I do have a work-around, you can use the paths option in tsconfig.json to force resolution:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "ES2020",
    "baseUrl": "./",
    "paths": {
      "@stackoverflow/stacks-icons/icons": ["node_modules/@stackoverflow/stacks-icons/dist/icons"]
    }
  },
  "files": ["index.ts"]
}

That's the same tsconfig.json but with baseUrl and paths added.

[giamir]

We are using package.json subpath exports in stacks-icons to map paths to specific entrypoints:
https://github.com/StackExchange/Stacks-Icons/blob/production/package.json#L11-L22

You are using "moduleResolution": "node" which does not support package.json exports.
The value "node" represents the resolution of Node 10, which never included package.json exports support (exports started to be supported from Node 12+).
If you change the moduleResolution value to nodenext (or any node >= 12) everything should work as expected.

For more context: microsoft/TypeScript#51901

[mjpieters]

Durn, I could have sworn I had tried the moduleResolution options. My apologies!

I'm creating user scripts that inject into Stack Exchange, so the final output is self-contained and I had not given this parameter enough thought.