Invalid descriptor for property '0'

[DullReferenceException]

In IE 11, I'm getting the error:

Invalid descriptor for property '0'

Walking up the call stack, it's stemming from some code that is constructing a DOMTokenList with a body element and 'className':

e=new DOMTokenList(body, 'className');

...which eventually hits this code which throws the error:

_(y,n,r)

• _ is some function named defineProperty
• y is some object
• n is 0
• r is set to undefined

I'm using this polyfill URL (linebreaks added for readability):

https://cdn.polyfill.io/v2/polyfill.min.js
  ?unknown=polyfill
  &features=
    default%2C
    fetch%2C
    Array.prototype.%40%40iterator%2C
    Array.prototype.find%2C
    Array.prototype.findIndex%2C
    Function.name%2C
    Number.isFinite%2C
    Promise%2C
    String.prototype.repeat%2C
    Array.prototype.includes%2C
    Intl.~locale.en-US%2C
    Promise.prototype.finally

[DullReferenceException]

In scrutinizing further, it seems clear that it's in the defining of indexer properties where this problem is occurring:

https://github.com/Financial-Times/polyfill-service/blob/1f45e5b95625180117d5b2f1979d8e217bc791a4/packages/polyfill-library/polyfills/_DOMTokenList/polyfill.js#L35-L41

[LachlanStuart]

Here's the unminified stacktrace:

TypeError: Invalid descriptor for property '0'
   at setDescriptor (https://cdn.polyfill.io/v2/polyfill.js?features=default,es6,es7,es2017,fetch,IntersectionObserver:1812:4)
   at defineProp (https://cdn.polyfill.io/v2/polyfill.js?features=default,es6,es7,es2017,fetch,IntersectionObserver:1715:4)
   at defineGetter (https://cdn.polyfill.io/v2/polyfill.js?features=default,es6,es7,es2017,fetch,IntersectionObserver:2609:4)
   at addIndexGetter (https://cdn.polyfill.io/v2/polyfill.js?features=default,es6,es7,es2017,fetch,IntersectionObserver:2633:4)
   at reindex (https://cdn.polyfill.io/v2/polyfill.js?features=default,es6,es7,es2017,fetch,IntersectionObserver:2644:6)
   at preop (https://cdn.polyfill.io/v2/polyfill.js?features=default,es6,es7,es2017,fetch,IntersectionObserver:2681:4)
   at _DOMTokenList (https://cdn.polyfill.io/v2/polyfill.js?features=default,es6,es7,es2017,fetch,IntersectionObserver:2685:3)
   at Anonymous function (https://cdn.polyfill.io/v2/polyfill.js?features=default,es6,es7,es2017,fetch,IntersectionObserver:3022:11)

That setDescriptor function is from the Symbol polyfill:

	setDescriptor = function (o, key, descriptor) {
		var protoDescriptor = gOPD(ObjectProto, key); // gOPD = The original Object.getOwnPropertyDescriptor, before being wrapped by this polyfill
		delete ObjectProto[key];
		defineProperty(o, key, descriptor);  // This line succeeds with args: o = _DOMTokenList, key = '0', descriptor = {configurable: false}
		if (o !== ObjectProto) {
			defineProperty(ObjectProto, key, protoDescriptor); // This line throws the exception with args: ObjectProto = Object.prototype, key = '0', protoDescriptor = undefined
		}
	};

If I try the same call in Firefox (Object.defineProperty(Object.prototype, '0', undefined)) I get the error TypeError: descriptor must be an object, got undefined, so this probably isn't exclusively an IE11 bug, it probably occurs in IE11 because IE is the only major browser that gets the DOMTokenList polyfill.

[quantuminformation]

We just came across this, inside IE11. We are using it in a React project using https://github.com/wmonk/create-react-app-typescript. The polyfill gets the app working and we are not sure what it polyfilled to fix it, but this error is thrown after a certain part of the app is reached.

Is there any quick fix for this?

using

Also fails with v3

[richseviora]

I've been working on a related bug in my client's app where the original Object.getOwnPropertyDescriptor stops returning a descriptor for Symbol.toStringTag, which causes that line to throw because undefined isn't a valid object.

In at least my situation what I think is happening in is that something is deleting that property from the Object prototype but I haven't tracked down where yet. It could be another polyfill.

[krohrsb]

This also happens to my application in the exact same way, Invalid descriptor for property '0' stemming from e=new DOMTokenList(body, 'className');.

[nickwaelkens]

Using in combination with Next.js, also bumping on this issue. Any real workaround?

[JakeChampion]

Is someone able to create a small reproducible test case (on https://jsbin.com or similar) for me to work with?

[craigkovatch]

@JakeChampion Also seeing this. I'm on [email protected]. I am unable to create a repro on jsbin because repro involves a giant IE11 polyfill file. However, I am generating that file like this:

const ie11_es6_opts = {
  uaString: 'Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko',
  minify: false,
  features: {
    'es6': { flags: ['gated'] }
  }
};

const devStream = fs.createWriteStream('polyfill-ie11-es6.js');
polyfillLibrary.getPolyfillString(ie11_es6_opts).then(bundleString => {
  devStream.write(bundleString);
  devStream.close();
});

Include that file in a barebones HTML file:

<html>
    <head>
        <title>Invalid descriptor repro</title>
        <script src="polyfill-ie11-es6.js"></script>
    </head>
    <body>
        Evaluate `Object.assign` in the console
    </body>
</html>

Open the console in IE11, and evaluate Object.assign (without even invoking it) yielding the error:

Stack:

setDescriptor [Line: 3683, Col: 4], polyfill-ie11-es6.js
defineProp [Line: 3586, Col: 4], polyfill-ie11-es6.js
Function$name [Line: 2306, Col: 5], polyfill-ie11-es6.js

Frame:

[neenhouse]

We're running into this issue as well trying to use a minimal polyfill webpack configuration and allow run-time polyfills to patch our application. Any movement on this issue in the last 30 days?

[HenriqueLimas]

With this code is possible to simulate on IE11 or also Chrome 37 (Before Symbol support) since it is easier to debug on Chrome:

delete Object.prototype[Symbol.toStringTag] // At some point the prototype key is being deleted

try {
  var a = {}
  Object.defineProperty(a, Symbol.toStringTag, { value: 42 })
} catch (error) {
  console.log('Ops error', error);  // "Property description must be an object: undefined"
}

console.log(a[Symbol.toStringTag]) // 42
console.log(a.propertyIsEnumerable(Symbol.toStringTag))
// Cannot read property '@@__symbol:toStringTag0.85429089097306135' of undefined 

At some point the key Symbol.toStringTag in the Object.prototype is being deleted. I am having this issue using Webpack + ReactUniversalComponent in dev mode.

[felipetoffolo1]

Does anyone has any workaround for that? I started having the same problem when using loadablecomponents. For some reason this does not happen when i run it locally.

[jbach]

What’s the status here? Errors in IE11 aren’t that useful for a polyfill lib.

[chr1s1k]

I had the same issue and fixed it by providing polyfill for Object.getOwnPropertyDescriptors coming from ES2017 (ES8) features.

https://polyfill.io/v3/polyfill.min.js?features=Object.getOwnPropertyDescriptors

[JakeChampion]

Is this still an issue people are seeing?

[leem32]

Yep, still an issue for me.

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2Ces5%2Ces6%2Ces7%2CObject.getOwnPropertyDescriptors%2CNodeList.prototype.forEach"></script>

[romainmenke]

Does the error happen simply by loading the polyfills on a blank page or is there surrounding code? If there is extra code, can you share the url where this happens?

[leem32]

No, it does not happen on a blank page. The page with issues is only in the local environment at the moment.

I will try adding more polyfills to the bundle and let you know if I work anything out.

[romainmenke]

@leem32 Thank you Any example you could share with the error would be great.

The page with issues is only in the local environment at the moment.

Is this something that could be made public in some form?

My best guess at the moment is that something is using DOMTokenList in an unexpected way. It's impossible to pin point the source of the issue without seeing all the code involved.

[romainmenke]

I was able to replicate this when using both core-js (through babel preset-env) and polyfill.io.

Excluding web.dom-collections.iterator and web.dom-collections.for-each in your babel config might help. example

But core-js and polyfill.io have other conflicts so you will likely get other errors even if you exclude those.

[thienanle]

I was able to replicate this by loading this up in IE11 after adding the polyfill below:

https://moment.github.io/luxon/demo/global.html

Polyfill:

<script src="https://cdn.polyfill.io/v3/polyfill.js?features=default,String.prototype.repeat,Object.getOwnPropertyDescriptors,Array.prototype.find,Array.prototype.findIndex,Math.trunc,Math.sign,Object.is"></script>

[Kreozot]

Okay, actually I've found another bug in my IE console, and when I've fixed it, "Invalid descriptor for property" disappeared. The second bug was "object doesn't support property or method 'find'" which was fixed by adding 'Array.prototype.find' polyfill.

I don't know if it really relevant or it just how stars were positioned in my particular case, but my point is: It may be caused by some other code, not directly connected to polyfill itself.