Uncaught TypeError: Illegal constructor – Using Bonsai.JS in Backbone.JS

Question

I'm still new to js and I'm trying to fit bonsai.js into a backbone app.

I'm following this guide here: https://github.com/iamdustan/bonsai-demos , and trying to 'Separate Things Out' by putting the animation into a separate file titled hero-animation.js, but I get an Uncaught TypeError: Illegal constructor on the first line of hero-animation.js

This is called in my Backbone router, and is working fine...

homeAnimation: function() {
    bonsai.run(document.getElementById('heroContent'), {
    url: 'hero-animation.js',
    width: 500,
    height: 400
  });
}

Here is what I have in hero-animation.js which is resulting in an error on line 1:

var rect = new Rect(0, 0, 200, 200);
rect
.fill('random')
.addTo(stage)
.attr({
  x: stage.width - rect.attr('width'),
  y: stage.width - rect.attr('height')
})
.animate('0.5s', {
  x: 0,
  y: 0
});

Solution

Seems like you forgot to include bonsai.js.

Initially, Rect is an "interface", which means it can't be used as a constructor, and Bonsai overrides it for its own purposes.