search

PokeAPI / pokedex-promise-v2

An easy way to use pokeapi v2 with promises in node.js
MIT License
510 stars 89 forks source link

TypeError: Class extends value undefined is not a constructor or null when using this package? #73

Closed Stu-Gotz closed 9 months ago

Stu-Gotz commented 1 year ago

I am developing a Vue application and want to use this API, but obviously don't want to ping it to death so I wanted to use this package. I am trying to import and instantiate it, however, it gives me this whole long mess below. 

vue-router.js?v=b4b7a066:2493 TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:248:34)
    at Object.<anonymous> (pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:681:9)
    at node_modules/node-cache/lib/node_cache.js (pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:682:8)
    at __require (chunk-SISP346I.js?v=b4b7a066:9:50)
    at Object.<anonymous> (pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:691:35)
    at node_modules/node-cache/index.js (pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:693:8)
    at __require (chunk-SISP346I.js?v=b4b7a066:9:50)
    at pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:2232:33
triggerError @ vue-router.js?v=b4b7a066:2493
(anonymous) @ vue-router.js?v=b4b7a066:2280
Promise.catch (async)
pushWithRedirect @ vue-router.js?v=b4b7a066:2271
push @ vue-router.js?v=b4b7a066:2207
install @ vue-router.js?v=b4b7a066:2555
use @ chunk-3NMN3MUW.js?v=b4b7a066:5148
(anonymous) @ main.js?t=1684378655808:20
vue-router.js?v=b4b7a066:43 [Vue Router warn]: Unexpected error when starting the router: TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:248:34)
    at Object.<anonymous> (pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:681:9)
    at node_modules/node-cache/lib/node_cache.js (pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:682:8)
    at __require (chunk-SISP346I.js?v=b4b7a066:9:50)
    at Object.<anonymous> (pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:691:35)
    at node_modules/node-cache/index.js (pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:693:8)
    at __require (chunk-SISP346I.js?v=b4b7a066:9:50)
    at pokedex-promise-v2.js?t=1684378493506&v=b4b7a066:2232:33

When I comment out the import and instantiation, the app works normally. When I leave just the import, it causes the above message.

This is my package.json

{
  "name": "pgmp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.7",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.5",
    "koffing": "^1.0.0",
    "pinia": "^2.0.35",
    "pokedex-promise-v2": "^4.1.1",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.1",
    "sass": "^1.62.1",
    "vite": "^4.3.4"
  }
}
Naramsim commented 1 year ago

Hmm, not sure why the error is happening.

@HRKings any thoughts?

HRKings commented 1 year ago

@Stu-Gotz can we take a look at the code? Mainly the part of the import and instantiation

Stu-Gotz commented 1 year ago

@Stu-Gotz can we take a look at the code? Mainly the part of the import and instantiation

Sure thing, sorry.

import Pokedex from 'pokedex-promise-v2';
const dex = new Pokedex();

I also tried setting it to a state object, for state management in Vue, by doing this:

import Pokedex from 'pokedex-promise-v2';

export const useTeamStore = defineStore('teamStore', {
  state: () => ({
    team: "",
    dex: new Pokedex()
  }),
  // redacted 
  }

})

Both methods resulted in the same error.

Also, just in case it may be relevant, I am using Node v16.14.2.

HRKings commented 1 year ago

That's... really strange. When I test locally, I don't get any errors. After a little search, it can be related to Vite. Could you test with the fixes suggested in this issue? https://github.com/vitejs/vite/issues/9703

Stu-Gotz commented 1 year ago

It did work. Unfortunately, I don't really grok what the polyfill plugins do, but adding them in seems to have fixed things.

This is my vite.config.js and package.json files, respectively.

//vite.config.js
import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
import nodePolyfills from "rollup-plugin-polyfill-node";
import cjs from "@rollup/plugin-commonjs";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      process: "rollup-plugin-node-polyfills/polyfills/process-es6",
      buffer: "rollup-plugin-node-polyfills/polyfills/buffer-es6",
      events: "rollup-plugin-node-polyfills/polyfills/events",
      util: "rollup-plugin-node-polyfills/polyfills/util",
      sys: "util",
      stream: "rollup-plugin-node-polyfills/polyfills/stream",
      _stream_duplex:
        "rollup-plugin-node-polyfills/polyfills/readable-stream/duplex",
      _stream_passthrough:
        "rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough",
      _stream_readable:
        "rollup-plugin-node-polyfills/polyfills/readable-stream/readable",
      _stream_writable:
        "rollup-plugin-node-polyfills/polyfills/readable-stream/writable",
      _stream_transform:
        "rollup-plugin-node-polyfills/polyfills/readable-stream/transform",
    },
  },
  build: {
    rollupOptions: {
      plugins: [
        // Enable rollup polyfills plugin
        // used during production bundling
        nodePolyfills({
          include: ["node_modules/**/*.js", "../../node_modules/**/*.js"],
        }),
        cjs(),
      ],
    },
    commonjsOptions: {
      include: [],
      transformMixedEsModules: true,
    },
  },
  optimizeDeps: {
    disabled: false,
    plugins: [
      NodeGlobalsPolyfillPlugin({
        process: true,
      }),
      NodeModulesPolyfillPlugin(),
    ],
  },
});

//package.json
{
  "name": "pgmp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.7",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.5",
    "koffing": "^1.0.0",
    "pinia": "^2.0.35",
    "pokedex-promise-v2": "^4.1.1",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.1",
    "sass": "^1.62.1",
    "vite": "^4.3.4",
    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
    "@rollup/plugin-commonjs": "^21.1.0",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "rollup-plugin-polyfill-node": "^0.10.2"
  }
}
HRKings commented 9 months ago

@Naramsim should we close this issue? The underlying problem with Vite is still open, and I think there is nothing we can do at the moment