Installing on vite

[Daniel-Venera]

Hi,

Installing on new vite project throws : Uncaught TypeError: Class extends value undefined is not a constructor or null at node_modules/scryfall-sdk/out/util/MagicEmitter.js (MagicEmitter.js:81:13) at __require (chunk-RSJERJUL.js?v=1b33f517:3:50) at node_modules/scryfall-sdk/out/api/Cards.js (Cards.js:21:24) at __require (chunk-RSJERJUL.js?v=1b33f517:3:50) at node_modules/scryfall-sdk/out/Scry.js (Scry.js:18:17) at __require (chunk-RSJERJUL.js?v=1b33f517:3:50) at Scry.js:89:26

my package.json { "name": "mtg-draft", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview" }, "dependencies": { "scryfall-sdk": "^4.0.1", "vue": "^3.2.45" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", "typescript": "^4.9.3", "vite": "^4.1.0", "vue-tsc": "^1.0.24" } }

[ChiriVulpes]

Seems like vite doesn't provide a polyfill for the node.js EventEmitter module when rolled up. I've just committed a polyfill I wrote real quick for it and published it to npm as v4.0.2, if you'd like to give it a try.

[Daniel-Venera]

I got quite the same error Uncaught TypeError: Class extends value [object Object] is not a constructor or null at node_modules/scryfall-sdk/out/util/MagicEmitter.js (MagicEmitter.js:81:13) at __require (chunk-RSJERJUL.js?v=c7cb10fd:3:50) at node_modules/scryfall-sdk/out/api/Cards.js (Cards.js:21:24) at __require (chunk-RSJERJUL.js?v=c7cb10fd:3:50) at node_modules/scryfall-sdk/out/Scry.js (Scry.js:18:17) at __require (chunk-RSJERJUL.js?v=c7cb10fd:3:50) at Scry.js:89:26

[ChiriVulpes]

I'm going to need more info then unfortunately. Can you get me the .js file that's being produced by the bundler? Because it's definitely no longer the one provided by scryfall sdk, it has to be getting mangled in some way

[Daniel-Venera]

Thank for the reply here is the MagicEmitter.js produced :

"use strict"; var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; var __await = (this && this.__await) || function (v) { return this instanceof __await ? (this.v = v, this) : new __await(v); } var __asyncGenerator = (this && this.__asyncGenerator) || function (thisArg, _arguments, generator) { if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); var g = generator.apply(thisArg, _arguments || []), i, q = []; return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i; function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; } function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } } function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); } function fulfill(value) { resume("next", value); } function reject(value) { resume("throw", value); } function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); } }; Object.defineProperty(exports, "__esModule", { value: true }); const events_1 = require("events"); class MagicEmitter extends events_1.EventEmitter { constructor() { super(); this._ended = false; this._cancelled = false; this._willCancelAfterPage = false; this.mappers = []; this.on("end", () => { this._ended = true; }); this.on("cancel", () => { this._ended = true; }); } get ended() { return this._ended; } get cancelled() { return this._cancelled; } get willCancelAfterPage() { return this._willCancelAfterPage; } on(event, listener) { super.on(event, listener); return this; } emit(event, ...data) { if (event === "data") return super.emit(event, this.mappers.reduce((current, mapper) => mapper(current), data[0])); return super.emit(event, ...data); } emitAll(event, ...data) { for (const item of data) { super.emit(event, event !== "data" ? item : this.mappers.reduce((current, mapper) => mapper(current), item)); if (this._cancelled) break; } } cancel() { this._cancelled = true; this.emit("cancel"); return this; } cancelAfterPage() { this._willCancelAfterPage = true; return this; } waitForAll() { return __awaiter(this, void 0, void 0, function* () { return new Promise((resolve, reject) => { const results = []; results.not_found = []; this.on("data", result => { results.push(result); }); this.on("not_found", notFound => { results.not_found.push(notFound); }); this.on("done", () => resolve(results)); this.on("error", reject); }); }); } [Symbol.asyncIterator]() { return this.generate("data"); } all() { return this.generate("data"); } notFound() { return this.generate("not_found"); } map(mapper) { this.mappers.push(mapper); return this; } generate(event) { return __asyncGenerator(this, arguments, function* generate_1() { // save the new data on each event const unyielded = []; this.on(event, data => unyielded.push(data)); while (!this._ended) { // wait for the next event before yielding any new data yield __await(new Promise(resolve => this.once(event, resolve))); let data; while (data = unyielded.shift()) yield yield __await(data); } }); } } exports.default = MagicEmitter;

[ChiriVulpes]

This is not the latest version of scryfall-sdk, you can tell because it says const events_1 = require("events"); which was changed to const EventEmitter_1 = require("./EventEmitter"); in v4.0.2. Please update your scryfall-sdk version and try again

[Daniel-Venera]

Hi

Here is my project : https://github.com/Daniel-Venera/mtg-draft-vue

and I use the latest version 4.1.0 :/

[ChiriVulpes]

So it looks like rather than throwing an error on encountering a node module it doesn't support, it instead just returns an empty object, which causes scryfall-sdk to not error and use its polyfill. (Why does it work like this????) I'll fix it. Thank you for the example project to test with!

[Daniel-Venera]

wonderful thanks a lot !