ie8 respond.js 'undefined' is null or not an object

Question

I'm using respond.js (+1 for that library) and I'm getting and error to the following function of the object:

translate = function (styles, href, media) {
    // here I got 'undefined' error in IE 8
    var qs = styles.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),
        ql = qs && qs.length || 0;

    //try to get CSS path
    href = href.substring(0, href.lastIndexOf("/"));

    var repUrls = function (css) {
        return css.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, "$1" + href + "$2$3");
    },
    useMedia = !ql && media;

    //if path exists, tack on trailing slash
    if (href.length) {
        href += "/";
    }

    //if no internal queries exist, but media attr does, use that   
    //note: this currently lacks support for situations where a media attr is specified on a link AND
    //its associated stylesheet has internal CSS media queries.
    //In those cases, the media attribute will currently be ignored.
    if (useMedia) {
        ql = 1;
    }

    for (var i = 0; i < ql; i++) {
        var fullq, thisq, eachq, eql;

        //media attr
        if (useMedia) {
            fullq = media;
            rules.push(repUrls(styles));
        }
        //parse for styles
        else {
            fullq = qs[i].match(/@media *([^\{]+)\{([\S\s]+?)$/) && RegExp.$1;
            rules.push(RegExp.$2 && repUrls(RegExp.$2));
        }

        eachq = fullq.split(",");
        eql = eachq.length;

        for (var j = 0; j < eql; j++) {
            thisq = eachq[j];
            mediastyles.push({
                media: thisq.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/) && RegExp.$2 || "all",
                rules: rules.length - 1,
                hasquery: thisq.indexOf("(") > -1,
                minw: thisq.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/) && parseFloat(RegExp.$1) + (RegExp.$2 || ""),
                maxw: thisq.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/) && parseFloat(RegExp.$1) + (RegExp.$2 || "")
            });
        }
    }

    applyMedia();
},

Are there any other workarounds? I have tried different ones...

Answer 1

I had a similar issue in line 121 (Respond.js 1.3.0). An empty stylesheet was causing the issue and removing it solved the problem.

There is not enough information to tell if your case is exactly the same, but you may try and see if it helps.