Less.js + IE8 = Object doesn't support property or method 'bind'

Question

Whilst doing some cross-browser testing (using IE Edge in IE8 mode), the page fails to render correctly due to an error with Less JS (v2.7.1). The console log is:

SCRIPT438: Object doesn't support property or method 'bind' File: less.js, Line: 1896, Column: 1

Same goes for the minified version SCRIPT438: Object doesn't support property or method 'bind' File: less.min.js, Line: 13, Column: 27226

I've read that IE8 and below do not support bind hence the problem.

Can anyone offer a solution on how I can get around this issue without having to dump Less JS completely (not an option)?

Answer 1

You can use a polyfill for bind, like the MDN's one. There are some differences with the native one, as noted in the link.

if (!Function.prototype.bind) {
    Function.prototype.bind = function(oThis) {
       if (typeof this !== 'function') {
       // closest thing possible to the ECMAScript 5
       // internal IsCallable function
       throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
            return fToBind.apply(this instanceof fNOP
                   ? this
                   : oThis,
                   aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    if (this.prototype) {
        // Function.prototype doesn't have a prototype property
        fNOP.prototype = this.prototype; 
    }
    fBound.prototype = new fNOP();

    return fBound;
};

}