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

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

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:

However from TypeScript:

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.

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’