jwt-decode: Unable to use jwt-decode with typescript project

Description

I am trying to use jwt-decode in a typescript project i.e. Stencil Project & it is throwing following error:

import * as jwt_decode from 'jwt-decode';
.
.
.
let token = "........";
let decoded = jwt_decode(token);

This expression is not callable.Type ‘{ default: <TTokenDto>(token: string, options?: Options) => TTokenDto; }’ has no call signatures.

Reproduction

  • install jwt-decode in any typescript project
  • import it in your code & use
import * as jwt_decode from 'jwt-decode';
.
.
.
let token = "........";
let decoded = jwt_decode(token);
  • build project

Please provide the following:

  • Version of this library used: ^2.2.0
  • Version of the platform or framework used, if applicable: stencil - ^1.3.3 , typescript - 3.7.2

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 16 (2 by maintainers)

Most upvoted comments

I resolved this issue as follows:

import jwt_decode, { JwtPayload } from 'jwt-decode'; const decoded = jwt_decode<JwtPayload>(token || '') || null;

console.log(decoded); // {id: “601872b3eee5d0001c1cdcb2”, iat: 1613648982, exp: 1613735382}

You can import the jwt_decode directly

import jwt_decode from 'jwt-decode';

let token = "........";
let decoded = jwt_decode(token);

I tried this but vscode gave me an error saying ‘This expression is not callable’

@showduhtung I’m getting the same error ‘This expression is not callable’, so I use it like this and it’s working for me. I don’t get why I have to pass the payload myself though.

import jwt_decode, { JwtPayload } from 'jwt-decode'

const decodedToken = jwt_decode<JwtPayload>(token)

Hi I am having this issue. “moduleresolution”: “nodenext”

I came across the same “This expression is not callable” problem, and specifying the type did not solve the issue. I was however able to fix it by calling jwtDecode.default<JwtPayload>(...) instead. Not sure why that’s a thing, but I thought I’d share in case anyone has the same problem!

When in a standard ESM module it’s not a problem: Screenshot 2023-05-04 at 22 16 04

However from TypeScript: Screenshot 2023-05-04 at 22 17 32

TypeScript sees it as module import not a function per se, and this happens whenever moduleResolution is set to NodeNext. I think this a bug per se with TypeScript since Node ESM resolution is inferring types correctly.

However a middleground approach until fixed could be to change the exports to e.g.:

export function decode(token, options) {
 ...
}

export default decode;

The in the TypeScript definitions define the following:

...
export function decode<T = unknown>(
  token: string,
  options?: JwtDecodeOptions
): T

export default decode;

Then one could rather see the import as an module, and rather use .decode which is more intuitive than.default. Screenshot 2023-05-04 at 22 24 25

And it would still be backwards compatible.

I came across the same “This expression is not callable” problem, and specifying the type did not solve the issue. I was however able to fix it by calling jwtDecode.default<JwtPayload>(...) instead. Not sure why that’s a thing, but I thought I’d share in case anyone has the same problem!

@vskowronsky hey I have solved the issue. Just type cast it with your object model. Let say, export class FieldModel{ field1: string; field2:string; field3:string; }

import the FieldModel from package path; import jwt_decode from ‘jwt-decode’;

// replace JwtPayload with FieldModel jwt_decoded<FieldModel>(token || “”) || null; let decoded = jwt_decode<FieldModel>(token || ‘’) || null;

console.log(" fetching field 1 -----“, decoded.field1); console.log(” fetching field 2 -----“, decoded.field2); console.log(” fetching field 3 -----", decoded.field3);

Hi @rahulbhooteshwar, here’s an example Typescript project with jwt-decode.

I tried this but vscode gave me an error saying ‘This expression is not callable’