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
- npm install --save @types/jwt-decode
- npm install --save jwt-decode
- 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)
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@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.
Hi I am having this issue. “moduleresolution”: “nodenext”
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.:
The in the TypeScript definitions define the following:
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);
I tried this but vscode gave me an error saying ‘This expression is not callable’