Can't add property bridget, object is not extensible

[seesharper]

Hi. I'm trying to create a custom attribute in Aurelia that wraps bootstrap-slider. The problem that I am seeing seems somehow related to jQuery and possibly the fact that it gets loaded through System.js.

The following example is written in TypeScript, but the same thing happens in JavaScript.

Any idea what happens here?

PS: I did exactly the same thing with bootstrap-colorpicker and that worked like a charm.

import {inject, customAttribute, bindable} from 'aurelia-framework';
import 'bootstrap-slider';

@customAttribute('zoomslider')
@inject(Element)
export class ZoomSliderCustomAttribute {
    element: Element;

    constructor(element: Element) {
        this.element = element;

    }

    attached() {                        
        console.log("attached");        
    }
}

The error message is

Can't add property bridget, object is not extensible
    Error loading http://localhost:8080/src/zoomslider.ts
    at defineBridget (http://localhost:8080/jspm_packages/github/seiyria/bootstrap-slider@5.1.1/js/bootstrap-slider.js:176:14)
    at http://localhost:8080/jspm_packages/github/seiyria/bootstrap-slider@5.1.1/js/bootstrap-slider.js:186:5
    at http://localhost:8080/jspm_packages/github/seiyria/bootstrap-slider@5.1.1/js/bootstrap-slider.js:188:4
    at i (http://localhost:8080/jspm_packages/system.js:5:9601)

[rovolution]

I was able to replicate a similar issue using Webpack as my module builder and will attempt to come up with a fix sometime in the near future