Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feature] Generate esm-specific declaration files #760

Closed
IanVS opened this issue Nov 2, 2022 · 6 comments
Closed

[feature] Generate esm-specific declaration files #760

IanVS opened this issue Nov 2, 2022 · 6 comments

Comments

@IanVS
Copy link
Contributor

IanVS commented Nov 2, 2022

We are using tsup in storybook to bundle our files and create .d.ts files. A user, @weswigham, explained to us that we need to actually create separate type definition files for esm and cjs. Is this something that others have encountered? If so, maybe it makes sense for tsup to generate both .d.ts and .d.mts files.

It looks like this is a typescript 4.7+ feature, and is explained in https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#package-json-exports-imports-and-self-referencing, which shows separate declaration files for the esm and cjs exports.

The .d.mts and .d.cts extensions themselves are supported from 4.5+ (https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#new-file-extensions)

@cyco130
Copy link

cyco130 commented Nov 16, 2022

My current workaround is to use the following in the config file (I have the inverse issue):

async onSuccess() {
  await cp(
    resolve(__dirname, "dist/index.d.ts"),
    resolve(__dirname, "dist/index.d.cts"),
  );
},

(Needs more work for more complex libs, of course).

@RichiCoder1
Copy link

RichiCoder1 commented Mar 2, 2023

For some extra context: pmndrs/zustand#1381

TL;DR: TypeScript treats the below as CJS even when technically MJS is used under the covers when "type" is unspecified:

"export": {
  ".": {
    "types": "dist/index.d.ts",
    "import": "dist/index.mjs",
    "require": "dist/index.js"
  }
}

Or vice verse if the module is "type": "module".

So the missing part of tsup is to emit two different declarations in the above case (["dist/index.d.ts", "dist/index.d.mts"]) compiled with the correct target. Furthermore, the output of the Module (ESM) js and dts (when splitting) needs to have file extensions in any imports otherwise TypeScript will break when running under "target": "node16" or target "target": "nodenext".

@brc-dd
Copy link

brc-dd commented Mar 14, 2023

The onSuccess thing doesn't work because of #700 👀

@cyco130
Copy link

cyco130 commented Mar 14, 2023

The onSuccess thing doesn't work because of #700 eyes

Ooh, I must be copying the old d.ts then! Thanks for the heads up.

@Nishchit14
Copy link

any solution for this? It's breaking the type import in pnpm workspace with esm package.

@brc-dd
Copy link

brc-dd commented Jun 26, 2023

Should be fixed by #934?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants