6

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.

Improve this question
2
  • 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. Commented Jan 17, 2023 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). Commented Jan 17, 2023 at 18:44

3 Answers 3

Reset to default
7

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

How did you end up fixing it @Fabis?
@Zymotik I had this happening in a Vue context too so I passed my data into the troublesome function as a shallowRef instead of a vue-generated proxy. That solved it. The item was stored in Vuex before being passed in so I saved the data in Vuex specifically as a shallowRef so Vue didn't make it too reactive and that worked.
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,
});
Improve this answer

Comments

0

Just as a note if this happens to anybody using vue and vuex, I found the answer in this thread: ES6 Nested Proxy for Get on Frozen Object. Basically I was using Object.freeze in my vuex store and that was causing this issue since it had nested properties, and Object.freeze is shallow.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.