window.jwt_decode is undefined

[nidzovito]

https://github.com/auth0-blog/angular2-authentication-sample
I took the code for above link and I am applying jwt related code to this project but I get this error.

browser_adapter.js:77 ORIGINAL EXCEPTION: TypeError: window.jwt_decode is not a function
And I included this code to custom-typings.d.ts

interface Window {
jwt_decode(jwt: string): any;
}

Any idea?

[PatrickJS]

look in their inde.html
https://github.com/auth0/jwt-decode

[nidzovito]

i don't see inde.html nor index.html file in this repo

[PatrickJS]

https://github.com/auth0-blog/angular2-authentication-sample/blob/master/index.html

https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/index.html

[nidzovito]

i see this line in index.html file.

<script type="text/javascript" src="/node_modules/jwt-decode/build/jwt-decode.js"></script>

But when I include that in my index.html
It can't load the file.
http://localhost:3000/node_modules/jwt-decode/build/jwt-decode.js (Not found)

And I am trying to import this file in vendor.browser.ts but I can't proceed because this library doesn't have .ts file

Do you have any suggestion for this?

[nidzovito]

hi @gdi2290 do you have any opinion?
I appreciate thanks.

[PatrickJS]

in custom-typings include

declare module "jwt-decode" {
  function decode(token: string): any;
  namespace decode {}  // notice how we have to create a namespace that is equal to the function we're assigning the export to
  export = decode;
}

then in vendor

import 'jwt-decode';

then in your app

import * as jwt_decode from 'jwt-decode';

let jwt = 'wat'; // your jwt
let result = jwt_decode(jwt);
console.log(result);

[nidzovito]

hi @gdi2290 it works and when I debug 'let result=jwt_decode(jwt)' it actually calls the function from node_modules/jwt-decode.
But I can't understand how it calls the node_modules function?
Because "import 'jwt-decode'" in vendor will look up custom-typings file

can you explain a little bit please?

[nidzovito]

@gdi2290 the code is working it shows the error around this code.
import * as jwt_decode from 'jwt-decode';

[default] /home/georgismall/Project/closetbox-new-admin/src/app/app.component.ts:11:29
Module '"jwt-decode"' resolves to a non-module entity and cannot be imported using this construct.

But it works, any idea?

[PatrickJS]

@georgi-kovachev can you update the type definitions to

declare module "jwt-decode" {
  function decode(token: string): any;
  namespace decode {}  // notice how we have to create a namespace that is equal to the function we're assigning the export to
  export = decode;
}

there needs to be a namespace

[nidzovito]

Thanks it works.

[mikeesouth]

I'm not getting this to work. I still get Message: jwt_decode is not a function as an error. I get no errors from typescript or webpack so it seems like the imports, type definitions and webpack bundling works. But I still get the error in runtime and I do not know how to debug it. Anyone?

It works if I change the type definition to this:

declare function jwt_decode(token: string): any;

And remove this from the top of the file: import * as jwt_decode from 'jwt-decode';

[PatrickJS]

declare function jwt_decode(token: string): any;

is different from

declare module "jwt-decode" {
  function decode(token: string): any;
  namespace decode {}  // notice how we have to create a namespace that is equal to the function we're assigning the export to
  export = decode;
}

the declare you have is saying jwt_decode is a global function while the other one is saying the type returned from the "jwt-decode" module is a function. With the latest changes to typescript 2 you shouldn't need to do this anymore because we have declare module "*"; which will default any module without a type definition to any