[BUG/HELP] Uncaught TypeError: Right-hand side of 'instanceof' is not callable

[nameszian]

Hello, I have installed svg.js and svg.resize.js/svg.select.js using npm, and when importing the libraries like this:

import SVG from 'svg.js';
import SVGselect from 'svg.select.js';
import SVGresize from 'svg.resize.js';

Then I link draw with a div with id=drawing, and I create a pink rectangle on the screen, and I make the rect object .selectize().resize();. Up to this point everything is visually correct, the pink rectangle is on the screen (Really after adding selectize and resize it is black with the selection points in the corners):

const draw = SVG('drawing'); // <div> with id drawing
const rect = this.draw.rect(150, 100).attr({ fill: '#F06' });
rect.selectize().resize();

The following problem is printed by the console when you try to select / resize with selection points in the corners of the rectangle:

svg.js?a2bf:3532 Uncaught TypeError: Right-hand side of 'instanceof' is not callable
    at initializer.fire (svg.js?a2bf:3532)
    at initializer.eval (svg.select.js?a16d:266)

❓I have done something wrong?

It may be the same problem as in svg.draggable.js issue #98

[nameszian]

Like many people who use an event bus in Vue.js, it defines window.Event, and it turns out that SVG.js also uses window.Event, so the Wrapper of the event bus must be renamed, e.g window.CustomEventBus = new Class ...:

window.CustomEventBus = new class {
  constructor() {
    this.vue = new Vue();
  }
  commit(event, data = null) {
    this.vue.$emit(event, data);
  }
  receive(event, callback) {
    this.vue.$on(event, callback);
  }
};

I will check in the next few days if this was really what caused the error, if so, I will close the issue.

[Fuzzyma]

window.Event is only used when using the CustomEvent polyfill. It is a native object which should be never overwritten or changed from any library. If vue does, its not a problem with svg.js but with vue.js.

To your problem with the BLACK rectangle: There is a css file in svg.select.js and you need it!

[nameszian]

it works, it's not about Vue.js, it's about how people usually implement an event bus in Vue.js, as a habit. But the name of window.Event is changed to any other (e.g. CustomEventBus) in Vue project, Vue.js will work the same, and svg.js will not explode.

So everything is fine. Thanks.