[2.7.10] readonly on frozen object causing TypeError: Cannot define property __v_rawToReadonly

This issue has been tracked since 2022-09-21.

Version

2.7.10

Reproduction link

codesandbox.io

Steps to reproduce

reason:
Readonly function sets new property on object recursively. This may cause this error when meeting frozen variables. Of course this error can also happen when using readonly directly on frozen objects.

code:

import { readonly } from 'vue';
const test = {
variable: { tp: 1 },
}
Object.freeze(test.variable);
const readonlyTest = readonly(test);

export default {
name: "App",
setup() {
const { variable } = readonlyTest;
return {
variable,
}
},
};

What is expected?

go well

What is actually happening?

[Vue warn]: Error in setup: "TypeError: Cannot define property __v_rawToReadonly, object is not extensible"
TypeError: Cannot define property __v_rawToReadonly, object is not extensible


solvement:
#12798
This fix can simply solve the issue by checking the extensibility of target, and keep the temp proxy at the same time, but leaving existing proxy cache useless.
The main reason is the "isReadonly" judgement, but it's difficult to change this basic feature, and the frozen target may still contain not frozen things? As this case may happen rarely, this fix is enough now and willing for future improvements.

xiaxzp wrote this answer on 2022-09-21

background

My team have an inner lib using class & static for enums. When we upgrade fron 2.6 to 2.7, and delete composition api, this bug comes out. I finally find out that we use the Object.freeze in the enums lib, and this causes error with another lib, which is using readonly on it.

More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-10-03
Star Count 199758
Watcher Count 6095
Fork Count 32874
Issue Count 590

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date