Basic usage doesn't work in TypeScript

[auth0]

Basic usage doesn't work in TypeScript

[leaumar]

Try to import jwks-rsa as default : import jwksRsa from "jwks-rsa";

I can confirm this works with tsc test.ts --esModuleInterop:

import jwksRsa from "jwks-rsa";
console.info(jwksRsa({jwksUri: ""}));

But it would be nice if it worked normally.

The following fails despite compiling:

import {JwksClient} from "jwks-rsa";
console.info(new JwksClient({jwksUri: ""}));

This works but violates common linting rules and has high wtf/min in code reviews: 😁

import * as jwks from "jwks-rsa";
import {ClientOptions, JwksClient} from "jwks-rsa";
const createClient = (jwks as unknown) as (options: ClientOptions) => JwksClient;
console.info(createClient({jwksUri: ""}));

I think the problem is this in your index.d.ts:

declare function JwksRsa(options: JwksRsa.ClientOptions): JwksRsa.JwksClient;
declare namespace JwksRsa { 
  class JwksClient {
    constructor(options: ClientOptions);
  }
}
export = JwksRsa;

Having a duplicate identifier seems strange, and the class with constructor probably doesn't match reality since calling the constructor throws a TypeError that it isn't a constructor.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you have not received a response for our team (apologies for the delay) and this is still a blocker, please reply with additional information or just a ping. Thank you for your contribution! 🙇‍♂️

[leaumar]

Having read up on the issue again some more with a clearer head, I agree this ticket can't really go anywhere new, @adamjmcgrath . The problem is talked about plenty online, but there seem to be no "clever tricks" or anything aside from making a hybrid library with multiple exposed files to import from (each with a different module system). esModuleInterop is simply the way to go with any commonjs being imported into es6. Thanks for your input and patience. :)

[adamjmcgrath]

import * as jwks from "jwks-rsa"; requires enabling allowSyntheticDefaultImports if I'm not mistaken. It's not as bad as moduleInterop, but still configuration creep.

This works for me with zero config, see https://repl.it/@AdamMcGrath/ProbableHomelyMonitor

I don't think there's really a question about what the technical issue is anymore, it's more about what can be done to improve UX (i.e. make jwks-rsa all-compatible)

We do the same as express (and probably koa, hapi, etc..). I don't think we can do more than that (without converting the library itself to es modules)

jwks-rsa

declare function JwksRsa(options: JwksRsa.ClientOptions): JwksRsa.JwksClient;

declare namespace JwksRsa {
  class JwksClient { ... }
  ...
}

export = JwksRsa;

https://github.com/auth0/node-jwks-rsa/blob/master/index.d.ts

@types/express

declare function e(): core.Express;

declare namespace e {
  var json: typeof bodyParser.json;
  ...
}

export = e;

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/express/index.d.ts

[davidpatrick]

Thanks @adamjmcgrath and @leaumar for working this one out.

[samuela]

bump

[llienard]

Try to import jwks-rsa as default : import jwksRsa from "jwks-rsa";

[nicolaracco]

Using esModuleInterop cannot be considered a solution because it creates incompatibilities with other libraries. I've used the workaround proposed by @leaumar but, as they say, it has high wtf/min reaction.

[adamjmcgrath]

Hi @llienard @leaumar @nicolaracco

This library exports commonjs. In order to model this in typescript we've used export =.

When exporting a module using export =, TypeScript-specific import module = require("module") should be used to import the module (see: https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require). So the following would work:

import jwksRsa = require("jwks-rsa");
console.info(jwksRsa({jwksUri: ""}));

If you want to have this common js library interoperate with es modules (eg you want to use it with a default import) - then you'll need to use the esModuleInterop flag.

Having a duplicate identifier seems strange

This is expected, have a look at the function with extra fields example in https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html

[leaumar]

@adamjmcgrath
Using require violates my project's rules:

TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.
ESLint: A require() style import is forbidden.(@typescript-eslint/no-require-imports)

Is there no change/addition you could make to the library that would be fully backward compatible (obviously) but also allow it to work hassle-free (including no compatibility settings like esModuleInterop) in the type of projects it currently doesn't work in? This is the only library I have this issue with. I'm not in a position to offer the solution myself because I'm not a pro on the whole module ecosystem and compatibility tricks.

[nicolaracco]

@adamjmcgrath Using esModuleInterop is not standard nor recommended in typescript. Using it creates problems with other libraries (in my case I was already trying with esModuleInterop and got errors when using sharp if I recall correctly).

[adamjmcgrath]

This library is not an ES module, it's a CJS module, so if you want to use it like an ES Module with a default import import jwksRsa from "jwks-rsa"; - you need to use esModuleInterop

@adamjmcgrath Using esModuleInterop is not standard nor recommended in typescript.

I'm not aware of any recommendation from typescript against the use of esModuleInterop or any TypeScript standards that don't include it, but I'd be happy to take a look at any.

If you don't want to use esModuleInterop you can try:

import * as jwks from "jwks-rsa";
console.log(jwks({jwksUri: ""}));

This is the only library I have this issue with.

@leaumar - are you able to share your project? Do you use express, hapi or koa? They're CJS modules and I'd be interested to know how you import them

[leaumar]

I checked the work project that made me reply on this thread, someone has enabled moduleInterop there in the meantime to stop having these problems (with koa and hapi indeed).

In some private projects, where I want stricter rules, I got around the issue by... finding alternative libraries for the few that gave me this.

import * as jwks from "jwks-rsa"; requires enabling allowSyntheticDefaultImports if I'm not mistaken. It's not as bad as moduleInterop, but still configuration creep.

I don't think there's really a question about what the technical issue is anymore, it's more about what can be done to improve UX (i.e. make jwks-rsa all-compatible):

Is there no change/addition you could make to the library that would be fully backward compatible (obviously) but also allow it to work hassle-free (including no compatibility settings like esModuleInterop) in the type of projects it currently doesn't work in?

^ honest question
Edit: I think it's safe to say "this kind of projects" = vanilla es6 imports? The goal for me at least is to use all my libs with vanilla config, no special settings just for any library.

Sorry if my answers are maybe getting inconsistent, my attention is spread over twice as many projects as I have fingers, so yeah... I've said everything I had to add. :)