3

What does this JavaScript error actually mean? I'm not asking about my specific case, just generally how is this error message meant to be understood?

TypeError: 'get' on proxy: property 'items' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '[object Array]' but got '[object Array]')

I don't understand why JavaScript would care what the proxy returns? Why does it matter if its "its actual value" or something else? Isn't what what proxies are (sometimes) used for - returning data in place of the original result?

Additionally - in my specific version of this error message, it appears that the expected type is the same as the returned type so that confuses me even more.

user3840170
  • 26,597
  • 4
  • 30
  • 62
Fabis
  • 1,932
  • 2
  • 20
  • 37
  • My JS knowledge is limited but i believe the error tells you that the property 'items' has been set to be non configurable and read only, as in its not meant to be changed in any way, which is what you are doing when you define `get()`. You're overwriting the value of a property that isnt meant to be overwritten according to how it was originally defined. You could change the configurable or writable property using `Object.defineProperty()`. As for the end of the error, JS is telling you the type of value not that value itself, not sure why that is though. – Kevin Hernandez Jan 17 '23 at 16:30
  • But I'm not really overwriting it, I'm working with the proxy - a wrapper - at that point. But I guess I can see how if you see the proxy as "the same" as the object it wraps, then you need a read-only non-configurable property to return the same (altho I'm not sure if I'd agree that this restriction needs to be in place). – Fabis Jan 17 '23 at 18:44

2 Answers2

2

Apparently the restriction that causes this error comes from the ECMAScript spec for Proxies, see this section.

[[Get]] for proxy objects enforces the following invariants:

  • The value reported for a property must be the same as the value of the corresponding target object property if the target object property is a non-writable, non-configurable own data property.
  • The value reported for a property must be undefined if the corresponding target object property is a non-configurable own accessor property that has undefined as its [[Get]] attribute.

So if a property of an object is non-writable and non-configurable, the proxy that wraps this object must return the exact same value that the property of the source object holds when the property is read.

In my case the issue was caused by Vue reactifying a non-writable and non-configurable object property and returning the property's value wrapped in another proxy, which broke that rule.

The rule kind of makes sense if you see the proxy as "the same" as the source object. If that source object's property is read-only and not configurable, then any proxy for that object should also not be able to change the value of that property. I'm not sure if I agree, however, because at the end of the day the proxy is not the source object and so I think it should be up to it to decide whether or not to follow the rules of the source object, but maybe I'm missing something.

Fabis
  • 1,932
  • 2
  • 20
  • 37
0

Here's a related issue on vue's repo: https://github.com/vuejs/core/issues/3024.

It says that you should use markRaw as a workaround:

Object.defineProperty(outer, "prop", {
      value: markRaw(inner),
      writable: false,
      configurable: false,
});
Михаил Кормановский
  • 91
  • 1
  • 2