Right-hand side of 'instanceof' is not an object, jsonwebtoken/sign.js

Question

How to fix this error "Right-hand side of 'instanceof' is not an object, jsonwebtoken/sign.js"?

I'm trying to create a chat web app in VueJs web framework using @azure/web-pubsub and @azure/web-pubsub-client packages. Initially I got errors related to 'crypto', 'stream', 'Buffer' and 'chile_process' which I fix by installing npm packages crypto-browserify, stream-browserify and buffer and also added fallback settings in my webpack.config.js.

  fallback: { // not present by default
                "crypto": require.resolve("crypto-browserify"),
                "stream": require.resolve("stream-browserify"),
                "buffer": require.resolve("buffer"),
                //"util": false,
                "child_process": false,
            }

Above fixed the build issue make the vuejs application run but while trying to create WebPubSubClient instance, code internally goes through jsonwebtoken/sign.js where it fails with mentioned here and code in sign.js is as:

 if (secretOrPrivateKey != null && !(secretOrPrivateKey instanceof KeyObject)) {
    try {
      secretOrPrivateKey = createPrivateKey(secretOrPrivateKey)
    } catch (_) {
      try {
        secretOrPrivateKey = createSecretKey(typeof secretOrPrivateKey === 'string' ? Buffer.from(secretOrPrivateKey) : secretOrPrivateKey)
      } catch (_) {
        return failure(new Error('secretOrPrivateKey is not valid key material'));
      }
    }
  }

Sign.js is resolving it through 'crpto' as

const { KeyObject, createSecretKey, createPrivateKey } = require('crypto')

I'm stuck with this error and unable to make any progress. How to fix this?

Here are the list of npm dependencies which my project has along with node (v20.2.0) and npm (v9.6.3)

 "dependencies": {
        "@azure/identity": "^3.2.2",
        "@azure/web-pubsub": "^1.1.1",
        "@azure/web-pubsub-client": "^1.0.0-beta.3",
        "axios": "0.21.4",
        "core-js": "3.25.3",
        "crypto-browserify": "^3.12.0",
        "msal": "^1.4.18",
        "stream-browserify": "^3.0.0",
        "util": "^0.12.5",
        "uuid": "^9.0.0",
        "vue": "2.6.14",
        "vue-i18n": "8.27.2",
        "vue-router": "3.5.2",
        "vuex": "3.6.2"
    },
    "devDependencies": {
        "@babel/core": "7.15.5",
        "@babel/eslint-parser": "7.15.7",
        "@babel/preset-env": "7.15.6",
        "@types/jest": "27.4.0",
        "@types/node": "17.0.16",
        "@types/uuid": "^9.0.1",
        "@typescript-eslint/eslint-plugin": "5.11.0",
        "@typescript-eslint/parser": "5.11.0",
        "@vue/eslint-config-typescript": "9.1.0",
        "@vue/test-utils": "1.2.2",
        "@vue/vue2-jest": "27.0.0-alpha.2",
        "babel-loader": "8.2.2",
        "clean-webpack-plugin": "4.0.0",
        "concurrently": "7.4.0",
        "cors": "2.8.5",
        "css-loader": "6.2.0",
        "dotenv-webpack": "7.0.3",
        "eslint": "7.32.0",
        "eslint-plugin-vue": "8.0.1",
        "eslint-webpack-plugin": "3.2.0",
        "html-webpack-plugin": "5.3.2",
        "jest": "27.3.1",
        "jest-fetch-mock": "3.0.3",
        "jest-sonar-reporter": "2.0.0",
        "mini-css-extract-plugin": "2.5.3",
        "nodemon": "2.0.20",
        "postcss-loader": "6.1.1",
        "process": "0.11.10",
        "sass": "1.41.1",
        "sass-loader": "12.1.0",
        "serve": "12.0.1",
        "stylelint": "13.13.1",
        "stylelint-config-sass-guidelines": "8.0.0",
        "terser-webpack-plugin": "5.2.4",
        "ts-jest": "27.1.3",
        "ts-loader": "9.2.6",
        "typescript": "5.1.3",
        "vue-loader": "15.9.8",
        "vue-remove-attributes": "1.0.3",
        "vue-template-compiler": "2.6.14",
        "webpack": "5.74.0",
        "webpack-bundle-analyzer": "4.6.1",
        "webpack-cli": "4.10.0",
        "webpack-dev-server": "4.11.1"
    },