Why do I get an 'instanceof' is not an object error when publishing a graph?

Question

I try to publish the graph made with Metabase into my Vue.js, by using the code provided by Metabase. However, I keep getting this kind of error:

ERROR

TypeError: Object prototype may only be an Object or null: undefined at Function.create () at Object.inherits (inherits_browser.js:6:31) at eval (data-stream.js:39:1) at ./node_modules/jws/lib/data-stream.js (chunk-vendors.js:2033:1) at webpack_require (app.js:279:33) at fn (app.js:525:21) at eval (sign-stream.js:3:1) at ./node_modules/jws/lib/sign-stream.js (chunk-vendors.js:2043:1) at webpack_require (app.js:279:33) at fn (app.js:525:21)

RewardCharts.vue

<template>
    <h1>Reward Points Charts</h1>
    <iframe
    src="{{url}}"
    frameborder="0"
    width="800"
    height="600"
    allowtransparency
    ></iframe>
</template>
<script>
    export default {
        data() {
          return {
            url: ''
          }
        },
        created() {
            try {
                var jwt = require('jsonwebtoken');
                var METABASE_SITE_URL = "http://localhost:3000";
                var METABASE_SECRET_KEY = "#secret key from Metabase ";
                var payload = {
                  resource: { question: 2 },
                  exp: Math.round(Date.now() / 1000) + (10 * 60) // 10 minute expiration
                };
              const token = jwt.sign(payload, METABASE_SECRET_KEY);
              this.url = METABASE_SITE_URL + "/embed/question/" + token +  "#bordered=true&titled=true";
            } catch (e) {
              console.log(e)
            }
       }
};
</script>

Package.json

{
  "name": "nse-driver-points-collection",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build  --port 810",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "axios": "^1.4.0",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "core-js": "^3.8.3",
    "crypto-browserify": "^3.12.0",
    "epic-spinners": "^2.0.0",
    "jsonwebtoken": "^9.0.2",
    "stream-browserify": "^3.0.0",
    "util": "^0.12.5",
    "vue": "^3.2.13",
    "vue-axios": "^3.5.2",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@types/jsonwebtoken": "^9.0.4",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^4.9.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

What am I doing wrong?