IE9 Null reference when including 'mdn-polyfills/Element.prototype.classList'

[kakarlus]

import 'mdn-polyfills/Element.prototype.classList'; gets an error in IE9.
Unable to get property 'document' of undefined or null reference

[niksy]

Same here! I thinks it’s related to this line: https://github.com/msn0/mdn-polyfills/blob/master/src/Element.prototype.classList/classList.js#L143 - window isn’t passed properly as function argument.

[missmatsuko]

I'm getting this error in IE11 as well. Not sure why since it seemed to have worked before, and continues to work on my other projects. Don't think anything's changed in the polyfill.

Adding window into the function at L143 as @niksy suggested seems to have fixed my issue.

[msn0]

@missmatsuko @niksy could you verify the following snippet works for you in IE9:

String.prototype.trim||(String.prototype.trim=function(){return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"")}),!window.Element||"classList"in Element.prototype||function(e){function c(e,t){if(""===t)throw new DOMException("Failed to execute '"+e+"' on 'DOMTokenList': The token provided must not be empty.");if(-1!==(wsI=t.search(wsRE)))throw new DOMException("Failed to execute '"+e+"' on 'DOMTokenList': The token provided ('"+t[wsI]+"') contains HTML space characters, which are not valid in tokens.")}var t,n;"function"!=typeof DOMTokenList&&function(f){var t=f.document,e=f.Object,n=e.prototype.hasOwnProperty,v=e.defineProperty,i=0,g=0,d=(f.Element,/[\11\12\14\15\40]/);function s(){if(!i)throw TypeError("Illegal constructor")}function a(){var e=f.event,t=e.propertyName;if(!g&&("className"===t||"classList"===t&&!v)){var n=e.srcElement,r=n[" uCLp"],o=""+n[t],i=o.trim().split(d),s=n["classList"===t?" uCL":"classList"],a=r.length;e:for(var l=0,c=r.length=i.length,u=0;l!==c;++l){for(var h=0;h!==l;++h)if(i[h]===i[l]){u++;continue e}s[l-u]=i[l]}for(var p=c-u;p<a;++p)delete s[p];if("classList"!==t)return;g=1,n.classList=s,n.className=o,g=0,s.length=i.length-u}}function r(l){if(!(l&&"innerHTML"in l))throw TypeError("Illegal invocation");srcEle.detachEvent("onpropertychange",a),i=1;try{new s}finally{i=0}var c=protoObj.prototype,u=new protoObj;e:for(var e=l.className.trim().split(d),t=0,n=e.length,r=0;t!==n;++t){for(var o=0;o!==t;++o)if(e[o]===e[t]){r++;continue e}this[t-r]=e[t]}c.length=Len-r,c.value=l.className,c[" uCL"]=l,v?(v(l,"classList",{enumerable:1,get:function(){return u},configurable:0,set:function(e){g=1,l.className=c.value=e+="",g=0;var t=e.trim().split(d),n=c.length;e:for(var r=0,o=c.length=t.length,i=0;r!==o;++r){for(var s=0;s!==r;++s)if(t[s]===t[r]){i++;continue e}u[r-i]=t[r]}for(var a=o-i;a<n;++a)delete u[a]}}),v(l," uCLp",{enumerable:0,configurable:0,writeable:0,value:protoObj.prototype}),v(c," uCL",{enumerable:0,configurable:0,writeable:0,value:l})):(l.classList=u,l[" uCL"]=u,l[" uCLp"]=protoObj.prototype),srcEle.attachEvent("onpropertychange",a)}s.prototype.toString=s.prototype.toLocaleString=function(){return this.value},s.prototype.add=function(){e:for(var e=0,t=arguments.length,n="",r=this.uCL,o=r[" uCLp"];e!==t;++e){c("add",n=arguments[e]+"");for(var i=0,s=o.length,a=n;i!==s;++i){if(this[i]===n)continue e;a+=" "+this[i]}this[s]=n,o.length+=1,o.value=a}g=1,r.className=o.value,g=0},s.prototype.remove=function(){for(var e=0,t=arguments.length,n="",r=this.uCL,o=r[" uCLp"];e!==t;++e){c("remove",n=arguments[e]+"");for(var i=0,s=o.length,a="",l=0;i!==s;++i)l?this[i-1]=this[i]:this[i]!==n?a+=this[i]+" ":l=1;l&&(delete this[s],o.length-=1,o.value=a)}g=1,r.className=o.value,g=0},f.DOMTokenList=s;try{f.Object.defineProperty(f.Element.prototype,"classList",{enumerable:1,get:function(e){return n.call(ele,"classList")||r(this),this.classList},configurable:0,set:function(e){this.className=e}})}catch(e){f[" uCL"]=r,t.documentElement.firstChild.appendChild(t.createElement("style")).styleSheet.cssText='_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}'}}(e),t=e.DOMTokenList.prototype,n=e.document.createElement("div").classList,t.item||(t.item=function(e){return void 0===(t=this[e])?null:t;var t}),t.toggle&&!1===n.toggle("a",0)||(t.toggle=function(e){if(1<arguments.length)return this[arguments[1]?"add":"remove"](e),!!arguments[1];var t=this.value;return this.remove(oldToken),t===this.value&&(this.add(e),!0)}),t.replace&&"boolean"==typeof n.replace("a","b")||(t.replace=function(e,t){c("replace",e),c("replace",t);var n=this.value;return this.remove(e),this.value!==n&&(this.add(t),!0)}),t.contains||(t.contains=function(e){for(var t=0,n=this.length;t!==n;++t)if(this[t]===e)return!0;return!1}),t.forEach||(t.forEach=function(e){if(1===arguments.length)for(var t=0,n=this.length;t!==n;++t)e(this[t],t,this);else{t=0,n=this.length;for(var r=arguments[1];t!==n;++t)e.call(r,this[t],t,this)}}),t.entries||(t.entries=function(){var e=this;return{next:function(){return 0<e.length?{value:[0,e[0]],done:!1}:{done:!0}}}}),t.values||(t.values=function(){var e=this;return{next:function(){return 0<e.length?{value:e[0],done:!1}:{done:!0}}}}),t.keys||(t.keys=function(){var e=this;return{next:function(){return 0<e.length?{value:0,done:!1}:{done:!0}}}})}(window);

The only difference is the window passed as @niksy suggested.

[kakarlus]

the snippet shared by @msn0 is working for me!

[niksy]

It seems like MDN docs on this topic have been updated to include window reference, so we should probably reflect that.

[msn0]

@tremby in #53 fixed this issue.

📦mdn-polyfills@5.15.1