Using in Vite/Vue3 App Throws 'Uncaught TypeError: util.inherits is not a function'

[mwoodward-atd]

When attempting to instantiate a Client object in a Vite/Vue3 app, the error Uncaught TypeError: util.inherits is not a function is thrown.

Environment

• Node 18.16

Steps to Reproduce

1. Create a new Vite/Vue3 app, install dependencies, and launch app

npm create vite@latest duo-vite-test -- --template vue
cd duo-vite-test
npm install
npm install @duosecurity/duo_universal
npm run dev

2. Instantiate Client in App.vue <script setup> block

import { Client } from '@duosecurity/duo_universal'

const client = new Client({
  clientId: 'theclientid',
  clientSecret: 'theclientsecret',
  apiHost: 'theapihost',
  redirectUrl: 'http://localhost:5173',
})

3. When the app reloads, the following error is thrown:

Uncaught TypeError: util.inherits is not a function
    at node_modules/jws/lib/data-stream.js (data-stream.js:39:6)
    at __require (chunk-OL3AADLO.js?v=606a3168:9:50)
    at node_modules/jws/lib/sign-stream.js (sign-stream.js:3:18)
    at __require (chunk-OL3AADLO.js?v=606a3168:9:50)
    at node_modules/jws/index.js (index.js:2:18)
    at __require (chunk-OL3AADLO.js?v=606a3168:9:50)
    at node_modules/jsonwebtoken/decode.js (decode.js:1:11)
    at __require (chunk-OL3AADLO.js?v=606a3168:9:50)
    at node_modules/jsonwebtoken/verify.js (verify.js:4:16)
    at __require (chunk-OL3AADLO.js?v=606a3168:9:50)
triggerError @ vue-router.mjs:3451
(anonymous) @ vue-router.mjs:3173
Promise.catch (async)
pushWithRedirect @ vue-router.mjs:3167
push @ vue-router.mjs:3099
install @ vue-router.mjs:3530
use @ runtime-core.esm-bundler.js:4381
start @ client-entry.js?t=1686682252177:120
await in start (async)
(anonymous) @ client-entry.js?t=1686682252177:165
Promise.then (async)
(anonymous) @ client-entry.js?t=1686682252177:163
Promise.then (async)
(anonymous) @ client-entry.js?t=1686682252177:139

[AaronAtDuo]

Looks to be similar/related to auth0/node-jws#101
also
https://stackoverflow.com/questions/70727494/why-cant-i-use-jwt-verify-from-jsonwebtoken-in-react

[mwoodward-atd]

Thanks @AaronAtDuo ! I'll take a look at that. Appreciate the reference.

[AaronAtDuo]

I'm looking through those myself. I'm not a Node and/or JS dev so bear with me :)

[AaronAtDuo]

It doesn't look like there's a great solution for this, but maybe the best one is to introduce some sort of polyfill to work around this?

[mwoodward-atd]

Thanks @AaronAtDuo -- that's what we've found so far as well, so we'll dig into that angle a bit more.

[lukashroch]

Stumbled upon this one recently too.

Could be fixed with swapping oldish jsonwebtoken lib with newer, though heavily used/tested jose lib, which is CJS/ESM and treeshakable, written for lot of environments, doesn't have any node specific deps.

If maintainers are OK with the idea (@AaronAtDuo ?) I could prepare a PR to swap the JWT libs and probably update the build process to make this lib both CJS/ESM compatible.

Though, I think there are still few node.js specifics in this lib too, which would need tackling (maybe later) to make this fully env-independent for both node and browsers. Alternatively, those can be handled with vite polyfill plugin.