can't import jsonwebtoken in modern typescript esm app

[chase-moskal]

we can't properly import this library in a modern typescript project. here's the problem:

• import * as jwt from "jsonwebtoken"
  • export default contains what i need, sign, verify, etc
  • however, the types won't let me have it
• @types/jsonwebtoken
  • does not have any definition for a default export

as you can see there's an incompatibility between what can actually be imported at runtime, versus what the @types typings allow us to import. on one hand, this could be seen as a deficiency in the community @types typings

on the other hand, a fundamental fix for this problem would be:

• upgrade jsonwebtoken for first-class esm support
• maintain official typings

related issue #655

---

in the meantime, here's the hack i used to circumvent this problem

1. create a shim module badmodules/jsonwebtoken.ts

   import * as _jsonwebtoken from "jsonwebtoken"
   const jsonwebtoken = <any>_jsonwebtoken
   
   import {
     sign as signType,
     verify as verifyType,
     SignOptions,
     VerifyOptions,
     Algorithm,
   } from "jsonwebtoken"
   
   const sign: typeof signType = jsonwebtoken.default.sign
   const verify: typeof verifyType = jsonwebtoken.default.verify
   
   export {
     sign,
     verify,
     Algorithm,
     SignOptions,
     VerifyOptions,
   }

2. import the shim module instead

   import {sign, verify, SignOptions, VerifyOptions, Algorithm}
     from "./badmodules/jsonwebtoken.js"

[diroussel]

This works for me in typescript...
import { Secret, decode, verify } from 'jsonwebtoken';

and the types all come through fine

[jd-solanki]

I am using vite + vue 3 and getting below error:

[diroussel]

@jd-0001 that is not related to this issue

[jd-solanki]

@diroussel Sorry, I thought this was related to this. May I know what's causing this so I can open new issue here.

Thanks.

[diroussel]

I would suggest setting a debugger breakpoint and following what is really going on. If you are able to get a working code sample maybe post it on stackoverflow. But github issues are to report bugs or request features, not to ask for debugging help.

[stipsan]

Hi!
I had some ESM troubles and made this package: stipsan/jsonwebtoken-esm
While at it I fixed some of the TS issues, and added support for typing on stuff like: import decode from 'jsonwebtoken-esm/decode'.
The lib isn't intended to live forever, as I assume auth0 will at some point publish an ESM version, so you can use this to check what version of jsonwebtoken is under the hood:
import {version} from 'jsonwebtoken-esm'

[vekunz]

Unfortunately jsonwebtoken-esm does not work in node scripts (and it seems that it is not intended to work in node scripts).

We now use jsonwebtoken again and import it this way:

import jsonwebtoken from 'jsonwebtoken';
const { sign, decode, verify } = jsonwebtoken;

This works fine for SvelteKit + Vite.

But nevertheless it would be great if this package can get native ESM support.

[mikenikles]

Hi @vekunz, I found your comment and have the exact same code for SvelteKit + Vite. The web app is deployed to Vercel and I notice I'm now getting the following error at runtime:

2022-10-16T22:19:35.390Z	aa6e5ab6-a5ee-45f6-b8a6-6a684842da7d	ERROR	TypeError: signJwt is not a function
    at file:///var/task/vercel/path0/services/website/.svelte-kit/output/server/entries/endpoints/login/github/callback/_server.ts.js:235:5
    at new Promise (<anonymous>)
    at signJwtAndSerializeCookie (file:///var/task/vercel/path0/services/website/.svelte-kit/output/server/entries/endpoints/login/github/callback/_server.ts.js:234:10)
    at GET (file:///var/task/vercel/path0/services/website/.svelte-kit/output/server/entries/endpoints/login/github/callback/_server.ts.js:276:30)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async render_endpoint (file:///var/task/vercel/path0/services/website/.svelte-kit/output/server/index.js:609:22)
    at async resolve (file:///var/task/vercel/path0/services/website/.svelte-kit/output/server/index.js:2511:22)
    at async handleUser (file:///var/task/vercel/path0/services/website/.svelte-kit/output/server/chunks/hooks.server.js:47:20)
    at async respond (file:///var/task/vercel/path0/services/website/.svelte-kit/output/server/index.js:2551:22)
    at async Server.default (file:///var/task/vercel/path0/services/website/.svelte-kit/vercel-tmp/index.js:31:3)

This is with Node.js 16 configured on Vercel. If you host on Vercel, do you use Node.js 16? If not on Vercel, do you mind sharing where your app is hosted?

Thanks

[vekunz]

Hello @mikenikles, we use SvelteKit with adapter-node and run it in a Docker container with Node 16.

[BasilaryGroup]

There is a very simple work around, use https://github.com/panva/jose

It look less than 2 minutes to install and modify my code.

[svedova]

There is a very simple work around, use https://github.com/panva/jose

It look less than 2 minutes to install and modify my code.

I ended up doing the same. Locally it works fine while developing but I realized this is broken when I built on Stormkit. Tried building locally, it gives me the same error:

Error: Failed to resolve entry for package "ms". The package may have incorrect main/module/exports specified in its package.json.

It works fine with https://github.com/panva/jose though, took a couple of minutes to rewrite as mentioned! Thanks 🙏

[behkha]

I am using vite + vue 3 and getting below error:

@jd-solanki Did you find any solution for this error?

[jd-solanki]

No 😞

[jaq-czaplin]

I was able to properly load jsonwebtoken with import { default as jwt } from 'jsonwebtoken'; on ESNext

[se040054]

Almost all "import" methods only support older versions of Node.js.

Just use "fastify/jwt" or "jwt-decode" pacakge

[RaghavRagh]

can anyone fix this?

[ash-lionell]

I was able to properly load jsonwebtoken with import { default as jwt } from 'jsonwebtoken'; on ESNext

This worked for me!

[NomanQureshi1997]

@RaghavRagh you are trying to access the jwtwebtoken on client side which is not allowed, by implementing it on server side you will not be facing this issue