TypeError: Cannot assign to read only property '__typename' of object

[hinogi]

It seems there is an issue here where some properties are readonly because it seems to be another proxy object. This results in unexpected error messages when simply assigning values to initalValues because it seems to try to reassign proxied properties which are writable: false.

https://github.com/logaretm/vee-validate/blob/f290933462db3e3499e158eef136bb30e5bc3942/packages/vee-validate/src/useForm.ts#L1289

[hinogi]

One strategy currently for me is to use structuredClone on the value before assigning them to initalValues

let initialValues = {};
initialValues.a = structuredClone(something.maybeproxy)

resetForm({ values: initalValues })

[logaretm]

Where did that state originate form? Vue-apollo?

[hinogi]

Yes, forwarded via props.

[sschneider-ihre-pvs]

it happens with nested proxies. For example if you have a structure that looks like

const result = {
  __typename: 'a',
  aType: 'string'
  b: {
    __typename: 'b',
    bType: 'string'
  }
}

in this case result is writable: true, configurable: true, but b is not, so when the attempt is made to merge result it will break at b because of that.

[logaretm]

I see, we can't use structuredClone because it will crash if someone has a computed or a ref inside their objects since it does not support proxies.

I will check if klona can be modified to not re-apply the same property descriptors as the original objects or not. I will mark this as a bug since we can definitely fix it without worrying about breaking behaviors.

Can you provide a quick reproduction of this so I can test against? it will make it much easier for me to work on a fix.