Unable to decode jwt with jwt-decode

Question

I'm trying to decode my token with jwt-decode but I can't. It gives me the following error. Does anyone know why?

ERROR Error: Uncaught (in promise): TypeError: jwt_decode_1.default is not a function TypeError: jwt_decode_1.default is not a function at RoleGuardService.canActivate (role-guard.service.ts?d7c4:19)

import jwt_decode from 'jwt-decode';

canActivate(route: ActivatedRouteSnapshot): boolean {
        // this will be passed from the route config
        // on the data property
        const expectedRole = route.data.expectedRole;
        const token = localStorage.getItem('token');
        // decode the token to get its payload
        const tokenPayload = jwt_decode(token);
        console.log(tokenPayload);
        if (
            !this.auth.isAuthenticated() ||
            tokenPayload.role !== expectedRole
        ) {
            this.router.navigate(['login']);
            return false;
        }
        return true;
    }

score 19 · Accepted Answer · answered Feb 13 '18 at 15:26

19

I think you should import it like this:

import * as jwt_decode from 'jwt-decode';

answered Feb 13 '18 at 15:26

pioro90

684
6
14

4

For some reason, this doesn't works in Angular 10. When the jwt_decode is called, I receive a runtime error that jwt_decode__WEBPACK_IMPORTED_MODULE_4__ is not a function. – Emanuele Benedetti Oct 05 '20 at 11:21
1

Same here, but I overlooked the new import style for jwt_decode 3. Importing as proposed below by @sorin-veștemean fixed the problem here. – hoeni Oct 05 '20 at 12:18
Warning: When upgrading from version 2 to 3, there's a potentially breaking change If you've previously imported the library as import * as jwt_decode from 'jwt-decode', you'll have to change your import to import jwt_decode from 'jwt-decode'; – saiful619945 Nov 20 '20 at 03:30

score 8 · Answer 2 · answered Oct 01 '20 at 19:41

According to documentation + internet search, the correct way is:

1. Install the package + types

npm install --save jwt-decode

npm install --save @types/jwt-decode

When you import the jwt_decode, you should surpass a rule from tslint, your code will look exactly like this (with commented line above)

 // @ts-ignore  
import jwt_decode from "jwt-decode";

Otherwise you will get an error like this

You can add also the rule for that on tsconfig.json , but is 1 time exception :)

This works but why is not possibile to use the notation `import { JwtDecode } from 'jwt-decode'`? — Emanuele Benedetti, Oct 05 '20 at 11:22

score 2 · Answer 3 · edited Oct 15 '20 at 19:24

2

I had the same error but after many attempts I did manage to solve this problem by using another method:

private decode(token: string) {
    try {
        return JSON.parse(atob(token.split(".")[1]));
    } catch (e) {
        console.log("error decoding token");
    }
}

function atob() references

edited Oct 15 '20 at 19:24

Ricardo Sanchez

4,935
11
56
86

answered Oct 15 '20 at 18:22

Jonathan Amaral

21
1

score 1 · Answer 4 · edited Jan 10 '21 at 17:29

jwt_decode has always been a CommonJS module which generally are imported as const jwt_decode = require('jwt-decode');, it's what Node.js uses.

The way to import CommonJS libraries with a JS import statement is import * as library-name from 'library-name;.

Modern frameworks like Angular 10 throw a warning when using packages with the CommonJS format, because they generally speaking can't be tree-shaked.

Version 3 (now in beta) of this library includes a more modern ESM build, which is what JS import statements are meant for, so importing the modern ESM package can be done the regular way using import jwt_decode from 'jwt-decode';. This is a breaking change, that's why I've created a new major version 3.

We still have a CommonJS build, but by default most modern build systems for the web (not node) will use the ESM build.

if you checkout the package.json file when installing the lib, you'll notice both builds in there.

{
    ...
    "main": "build/jwt-decode.cjs.js",
    "module": "build/jwt-decode.esm.js",
    ...
}

references

Ritcus · Answer 5 · 2022-09-18T21:57:35.680

0

npm install --legacy-peer-deps

npm install --save jwt-decode

npm install --save @types/jwt-decode

This solves mine problem

reference

edited Sep 18 '22 at 21:57

answered Aug 20 '22 at 23:47

Ritcus

65
6

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 24 '22 at 14:37

Unable to decode jwt with jwt-decode

5 Answers5