Package exports field does not include types #18835

ashley-hunter · 2023-08-25T09:38:26Z

Current Behavior

I have a React library that has multiple additional entrypoints and generates and exports field. When I build it the package.json exports field does not include a typings field to reference the .d.ts files that have been generated. As a result, when the library is published to NPM, and I try to consume it I get TypeScript errors as it cannot find the types for the library.

Here is an example of the output:

{
  "name": "@ux-aspects-universal/react",
  "version": "0.0.0",
  "license": "UNLICENSED",
  "types": "./src/index.d.ts",
  "exports": {
    "./package.json": "./package.json",
    ".": "./index.esm.js",
    "./a11y": "./a11y.esm.js",
    "./accordion": "./accordion.esm.js",
    "./alert": "./alert.esm.js",
    "./app-layout": "./app-layout.esm.js",
    "./breadcrumbs": "./breadcrumbs.esm.js",
    "./button": "./button.esm.js",
    "./checkbox": "./checkbox.esm.js",
    "./chip": "./chip.esm.js",
    "./common": "./common.esm.js",
    "./date-picker": "./date-picker.esm.js",
    "./date-time": "./date-time.esm.js",
    "./dialog": "./dialog.esm.js",
    "./drawer": "./drawer.esm.js",
    "./form": "./form.esm.js",
    "./i18n": "./i18n.esm.js",
    "./icon": "./icon.esm.js",
    "./input-group": "./input-group.esm.js",
    "./keycodes": "./keycodes.esm.js",
    "./loader": "./loader.esm.js",
    "./login": "./login.esm.js",
    "./masthead": "./masthead.esm.js",
    "./menu": "./menu.esm.js",
    "./navigation": "./navigation.esm.js",
    "./notification": "./notification.esm.js",
    "./number-picker": "./number-picker.esm.js",
    "./panel": "./panel.esm.js",
    "./popover": "./popover.esm.js",
    "./progress-bar": "./progress-bar.esm.js",
    "./radio-button": "./radio-button.esm.js",
    "./select": "./select.esm.js",
    "./slider": "./slider.esm.js",
    "./spinner": "./spinner.esm.js",
    "./table": "./table.esm.js",
    "./tabs": "./tabs.esm.js",
    "./text-input": "./text-input.esm.js",
    "./theming": "./theming.esm.js",
    "./time-picker": "./time-picker.esm.js",
    "./toggle-switch": "./toggle-switch.esm.js",
    "./toolbar": "./toolbar.esm.js",
    "./typography": "./typography.esm.js",
    "./utils": "./utils.esm.js",
    "./validation": "./validation.esm.js",
    "./wizard": "./wizard.esm.js",
    "./pagination": "./pagination.esm.js"
  },
  "module": "./index.esm.js",
  "type": "module",
  "main": "./index.esm.js"
}

Note the types only gets added to the top level of the package.json, not each export.

Expected Behavior

When generating exports fields the types would be added to package.json correctly, e.g.

{
  "name": "@ux-aspects-universal/react",
  "version": "4.4.1",
  "license": "UNLICENSED",
  "types": "./src/index.d.ts",
  "exports": {
    "./package.json": "./package.json",
    ".": "./index.esm.js",
    "./a11y": {
      "import": "./a11y.esm.js",
      "types": "./a11y/src/index.d.ts"
    },
    "./accordion": {
      "import": "./accordion.esm.js",
      "types": "./accordion/src/index.d.ts"
    },
    "./alert": {
      "import": "./alert.esm.js",
      "types": "./alert/src/index.d.ts"
    },
    "./app-layout": {
      "import": "./app-layout.esm.js",
      "types": "./app-layout/src/index.d.ts"
    },
    "./breadcrumbs": {
      "import": "./breadcrumbs.esm.js",
      "types": "./breadcrumbs/src/index.d.ts"
    },
    "./button": {
      "import": "./button.esm.js",
      "types": "./button/src/index.d.ts"
    },
    "./checkbox": {
      "import": "./checkbox.esm.js",
      "types": "./checkbox/src/index.d.ts"
    },
    "./chip": {
      "import": "./chip.esm.js",
      "types": "./chip/src/index.d.ts"
    },
    "./common": {
      "import": "./common.esm.js",
      "types": "./common/src/index.d.ts"
    },
    "./date-picker": {
      "import": "./date-picker.esm.js",
      "types": "./date-picker/src/index.d.ts"
    },
    "./date-time": {
      "import": "./date-time.esm.js",
      "types": "./date-time/src/index.d.ts"
    },
    "./dialog": {
      "import": "./dialog.esm.js",
      "types": "./dialog/src/index.d.ts"
    },
    "./drawer": {
      "import": "./drawer.esm.js",
      "types": "./drawer/src/index.d.ts"
    },
    "./form": {
      "import": "./form.esm.js",
      "types": "./form/src/index.d.ts"
    },
    "./i18n": {
      "import": "./i18n.esm.js",
      "types": "./i18n/src/index.d.ts"
    },
    "./icon": {
      "import": "./icon.esm.js",
      "types": "./icon/src/index.d.ts"
    },
    "./input-group": {
      "import": "./input-group.esm.js",
      "types": "./input-group/src/index.d.ts"
    },
    "./keycodes": {
      "import": "./keycodes.esm.js",
      "types": "./keycodes/src/index.d.ts"
    },
    "./loader": {
      "import": "./loader.esm.js",
      "types": "./loader/src/index.d.ts"
    },
    "./login": {
      "import": "./login.esm.js",
      "types": "./login/src/index.d.ts"
    },
    "./masthead": {
      "import": "./masthead.esm.js",
      "types": "./masthead/src/index.d.ts"
    },
    "./menu": {
      "import": "./menu.esm.js",
      "types": "./menu/src/index.d.ts"
    },
    "./navigation": {
      "import": "./navigation.esm.js",
      "types": "./navigation/src/index.d.ts"
    },
    "./notification": {
      "import": "./notification.esm.js",
      "types": "./notification/src/index.d.ts"
    },
    "./number-picker": {
      "import": "./number-picker.esm.js",
      "types": "./number-picker/src/index.d.ts"
    },
    "./panel": {
      "import": "./panel.esm.js",
      "types": "./panel/src/index.d.ts"
    },
    "./popover": {
      "import": "./popover.esm.js",
      "types": "./popover/src/index.d.ts"
    },
    "./progress-bar": {
      "import": "./progress-bar.esm.js",
      "types": "./progress-bar/src/index.d.ts"
    },
    "./radio-button": {
      "import": "./radio-button.esm.js",
      "types": "./radio-button/src/index.d.ts"
    },
    "./select": {
      "import": "./select.esm.js",
      "types": "./select/src/index.d.ts"
    },
    "./slider": {
      "import": "./slider.esm.js",
      "types": "./slider/src/index.d.ts"
    },
    "./spinner": {
      "import": "./spinner.esm.js",
      "types": "./spinner/src/index.d.ts"
    },
    "./styled-components": {
      "import": "./styled-components.esm.js",
      "types": "./styled-components/src/index.d.ts"
    },
    "./table": {
      "import": "./table.esm.js",
      "types": "./table/src/index.d.ts"
    },
    "./tabs": {
      "import": "./tabs.esm.js",
      "types": "./tabs/src/index.d.ts"
    },
    "./text-input": {
      "import": "./text-input.esm.js",
      "types": "./text-input/src/index.d.ts"
    },
    "./theming": {
      "import": "./theming.esm.js",
      "types": "./theming/src/index.d.ts"
    },
    "./time-picker": {
      "import": "./time-picker.esm.js",
      "types": "./time-picker/src/index.d.ts"
    },
    "./toggle-switch": {
      "import": "./toggle-switch.esm.js",
      "types": "./toggle-switch/src/index.d.ts"
    },
    "./toolbar": {
      "import": "./toolbar.esm.js",
      "types": "./toolbar/src/index.d.ts"
    },
    "./typography": {
      "import": "./typography.esm.js",
      "types": "./typography/src/index.d.ts"
    },
    "./utils": {
      "import": "./utils.esm.js",
      "types": "./utils/src/index.d.ts"
    },
    "./validation": {
      "import": "./validation.esm.js",
      "types": "./validation/src/index.d.ts"
    },
    "./wizard": {
      "import": "./wizard.esm.js",
      "types": "./wizard/src/index.d.ts"
    },
  },
  "module": "./index.esm.js",
  "type": "module",
  "main": "./index.esm.js"
}

GitHub Repo

No response

Steps to Reproduce

Follow the steps as outlined in Juri's helpful tweet 😊:

https://twitter.com/juristr/status/1692537684659785802

Nx Report

Node   : 16.17.1
OS     : darwin-x64
yarn   : 1.22.5
   
nx (global)        : 16.1.3
nx                 : 16.7.4
@nx/js             : 16.7.4
@nx/jest           : 16.7.4
@nx/linter         : 16.7.4
@nx/workspace      : 16.7.4
@nx/angular        : 16.7.4
@nx/cypress        : 16.7.4
@nx/devkit         : 16.7.4
@nx/esbuild        : 16.7.4
@nx/eslint-plugin  : 16.7.4
@nx/next           : 16.7.4
@nx/node           : 16.7.4
@nx/plugin         : 16.7.4
@nx/react          : 16.7.4
@nx/rollup         : 16.7.4
@nx/storybook      : 16.7.4
@nrwl/tao          : 16.7.4
@nx/web            : 16.7.4
@nx/webpack        : 16.7.4
typescript         : 4.9.4
---------------------------------------
Community plugins:
@compodoc/compodoc    : 1.1.19
@ngrx/component-store : 15.4.0
@storybook/angular    : 7.3.2
rxjs                  : 6.6.7
---------------------------------------
Local workspace plugins:
      @ux-aspects-plugins/typescript
      @ux-aspects-plugins/universal
      @ux-aspects-plugins/workspace
      @ux-aspects-plugins/angular
      @ux-aspects-plugins/styles
      @ux-aspects-plugins/react
      @ux-aspects-plugins/loki
      @ux-aspects-plugins/sepg
      @ux-aspects-plugins/scss

Failure Logs

No response

Package Manager Version

No response

Operating System

macOS
Linux
Windows
Other (Please specify)

Additional Information

No response

samwalshnz · 2023-08-29T03:32:04Z

Some additional content:
I am researching something related to this, and came across the following pull request that appears to have intentionally changed the generation of types and the "exports" field to no longer register these "types": https://github.com/nrwl/nx/pull/18342/files

github-actions · 2024-02-26T00:21:23Z

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

igorkamyshev · 2024-02-26T06:17:58Z

lol 😂

…on (#27152) We currently rely on the TS behavior of matching `d.ts` files based on the `.js` file names. e.g. `foo.js` matches `foo.d.ts`. However, it isn't working for all tools so we should explicitly set it. Most modern packages are still setting it even though it is not technically needed. e.g. [Nuxt](https://unpkg.com/browse/[email protected]/package.json) Note: If both ESM and CJS are present, then prefer `*.esm.d.ts` files since the generated types are in ESM format. ## Current Behavior `exports` entries are missing `types` field ## Expected Behavior `exports` entries have `types` field set ## Related Issue(s)  Fixes #18835 (cherry picked from commit 2d2c0b5)

github-actions · 2024-08-26T00:08:45Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

ashley-hunter added the type: bug label Aug 25, 2023

AgentEnder added scope: react Issues related to React support for Nx scope: js labels Aug 29, 2023

igorkamyshev mentioned this issue Sep 19, 2023

nx downgrade igorkamyshev/withease#50

Merged

github-actions bot added the stale label Feb 26, 2024

github-actions bot removed the stale label Feb 27, 2024

FrozenPandaz assigned ndcunningham May 15, 2024

jaysoo mentioned this issue Jul 26, 2024

fix(bundling): explicitly set types for exports entries in package.json #27152

Merged

jaysoo closed this as completed in #27152 Jul 26, 2024

jaysoo closed this as completed in 2d2c0b5 Jul 26, 2024

github-actions bot added the outdated label Aug 26, 2024

github-actions bot locked as resolved and limited conversation to collaborators Aug 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Package exports field does not include types #18835

Package exports field does not include types #18835

ashley-hunter commented Aug 25, 2023

samwalshnz commented Aug 29, 2023

github-actions bot commented Feb 26, 2024

igorkamyshev commented Feb 26, 2024

github-actions bot commented Aug 26, 2024

Package exports field does not include types #18835

Package exports field does not include types #18835

Comments

ashley-hunter commented Aug 25, 2023

Current Behavior

Expected Behavior

GitHub Repo

Steps to Reproduce

Nx Report

Failure Logs

Package Manager Version

Operating System

Additional Information

samwalshnz commented Aug 29, 2023

github-actions bot commented Feb 26, 2024

igorkamyshev commented Feb 26, 2024

github-actions bot commented Aug 26, 2024