Using jwt-decode with typescript front-end project

Question

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

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

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

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
• 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

Parnassian

import jwt_decode from 'jwt-decode';? – Libradalibrarian

@Libradalibrarian Thanks a lot man. It worked like a charm for me. I write that incorrect import as official documentation only specify require based import & just guessed that default import will work as is! – Parnassian

Answer 1

Following correction to the import statement works fine:

import jwt_decode from 'jwt-decode';

Update (November 2023): As pointed out in the comments, the package jwt-decode no loger has a default export. Therefore the correct import statement is now:

import { jwtDecode } from 'jwt-decode';

Parnassian

NOTE: for anyone reading this in 2023 or later that package seems to no longer have a default export you will need to import a named export instead. – Extemporary

Answer 2

For Angular 17 and newer you will need to import a named export instead (as @Jared Smith said)

import { jwtDecode } from 'jwt-decode';

Seaweed

Answer 3

As said by Nico you have to import a named export instead, using Angular 17 and newer. However I had to use the slightly different line of code for making it run properly:

import {jwtDecode } from 'jwt-decode';

Lowrance