Support TS moduleResolution node16/nodenext by adding "types" to package.json's exports map

[bestickley]

On which framework/platform would you like to see this feature implemented?

React

Which UI component is this feature-request for?

Other

Please describe your feature-request in detail.

I'd like to be able to use @aws-amplify/ui-react within a TypeScript project with a tsconfig.json that has a moduleResolution value of node16 or nodenext. When I currently do this, I get errors like:

Try `npm i --save-dev @types/aws-amplify__ui-react` if it exists or add a new declaration (.d.ts) file containing `declare module '@aws-amplify/ui-react';`
src/components/AccountMenu.tsx(2,51): error TS7016: Could not find a declaration file for module '@aws-amplify/ui-react'. '/Users/stickb/Code/niwc-pac/cosmos/node_modules/.pnpm/@[email protected]_bhvjxgt3qlsa6h77uyvrixez5u/node_modules/@aws-amplify/ui-react/dist/esm/index.js' implicitly has an 'any' type.

Please describe a solution you'd like.

In order to fix this, Amplify UI libraries should include a "types" key within their package.json's exports maps. @aws-amplify/ui-react example:
Current:

"exports": {
    ".": {
      "import": "./dist/esm/index.js",
      "require": "./dist/index.js"
    },
    ...
}

Requested:

"exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "import": "./dist/esm/index.js",
      "require": "./dist/index.js"
    },
    ...
}

Example of another library doing the same thing: tj/commander.js#1704
TypeScript background: https://www.typescriptlang.org/docs/handbook/esm-node.html#packagejson-exports-imports-and-self-referencing

Note, as stated in TS docs, the "types" key must occur first

We love contributors! Is this something you'd be interested in working on?

• 👋 I may be able to implement this feature request.
• ⚠️ This feature might incur a breaking change.

[wlee221]

Thanks @bestickley for the feature request! I'll bring this up to the team and keep this thread updated.

[bestickley]

More info:

[bestickley]

After reading the TS Docs again, an alternative to editing the package.json as I describe above is to add an index.d.ts next to dist/esm/index.js. TS Docs explain with NodeNext moduleResolution, it will look for a type declaration file next to the import file which for @aws-amplify/ui-react is ./dist/esm.index.js.

Also, for anyone wanting a work-around and using pnpm, You can use pnpm patch @aws-amplify/ui-react and edit package.json as mentioned above by adding "types": "./dist/types/index.d.ts", directly above "import": "./dist/esm/index.js",

[bestickley]

@wlee221, any updates on this? This should be a minor code change to package.json files.