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

Incorrect Types when using in a TypeScript ESM project #144

Closed
pkerschbaum opened this issue Sep 11, 2022 · 4 comments · Fixed by #145
Closed

Incorrect Types when using in a TypeScript ESM project #144

pkerschbaum opened this issue Sep 11, 2022 · 4 comments · Fixed by #145

Comments

@pkerschbaum
Copy link
Contributor

pkerschbaum commented Sep 11, 2022

🕗 Version & Regression Information

1.2.0

⏯ Playground Link

https://stackblitz.com/edit/node-3rxg4d

  1. Run npm install.
  2. Run tsc compilation via npm run build. The error occurs.

💻 Code

import invariant from 'tiny-invariant';

invariant(typeof 'foo' === 'string');

🙁 Actual behavior

I tried to run the code above from a TypeScript ESM package, this means:

  • "type": "module" set in package.json
  • "module": "node16" set in tsconfig.json

But in such a project, the code does not compile:

❯ npm run build
$ tsc
src/test.ts:3:1 - error TS2349: This expression is not callable.
  Type 'typeof import("/home/projects/node-3rxg4d/node_modules/tiny-invariant/dist/tiny-invariant")' has no call signatures.

invariant(typeof 'foo' === 'string');

Found 1 error in src/test.ts:3

Note that the compiled output does run as expected, so the only problem is the TypeScript compilation error.

🙂 Expected behavior

The code should compile.

@pkerschbaum
Copy link
Contributor Author

I think the root cause is the same as this: microsoft/TypeScript#50690.

@alexreardon
Copy link
Owner

I ran into this one today as well! What can I do to fix this?

@pkerschbaum
Copy link
Contributor Author

Seems like we must get TypeScript into "ESM" mode when importing tiny-invariant.

I know two solutions:

  1. Modify build to output dist/tiny-invariant.mjs and dist/tiny-invariant.d.mts (note the file extensions mjs and mts). And configure conditional exports (nodejs.org/api/packages.html#conditional-exports).
  2. Modify build to output dist/node16/tiny-invariant.js and dist/node16/tiny-invariant.d.ts, and put a package.json there with "type": "module" set.
    And configure conditional exports.
    Because JS files are considered ESM modules when the "nearest" package.json contains this property.

Approach 2 is what safe-stable-stringify does.

@pkerschbaum
Copy link
Contributor Author

The problem with approach 1 is that it is difficult to output dist/tiny-invariant.d.mts without creating a src/tiny-invariant.mts file.
I would go with approach 2, I will create a PR with it - have almost done it already :)

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