Error when accessing destructured prop inside defineModel's getter/setter
Vue version
3.4.3
Link to minimal reproduction
Steps to reproduce
<script setup lang="ts">
const { isMulti } = defineProps<{ isMulti?: boolean }>();
const model = defineModel({
get() {
// ⚠️ it works without destructuring -> props.isMulti ? [] : ''
return isMulti ? [] : '';
},
});
</script>
What is expected?
Should compile component without error.
What is actually happening?
Compiler crashes with error
Error: Cannot split a chunk that has already been edited (6:13 – "defineModel({
get() {
return isMulti ? [] : '';
},
})")
System Info
No response
Any additional comments?
No response
workaround :
<script setup lang="ts">
const { isMulti } = defineProps<{ isMulti?: boolean }>();
const getter = () => {
return isMulti ? [] : '';
}
const model = defineModel({
get:getter,
})
</script>
The direct reason is that the compiler will first convert defineModel, and then convert props, that is, add the __props prefix. In this process, due to the use of magicString to operate the defineModel part, props cannot be converted again, resulting in an error.