Subscribe on changes!

Error when accessing destructured prop inside defineModel's getter/setter

avatar
Jan 2nd 2024

Vue version

3.4.3

Link to minimal reproduction

https://play.vuejs.org/#eNqNUstu20AM/BViL3GAWDq4J9V5tEUOLZA2aHvr9qBIjLPpirvgUo4BQ/9eau0orvtATxI5fMwMd2vexFisezSVWaaGXRRIKH0EX9Pq3BpJ1lxYAmgCJYEtuHTTe3EwwDm0eO8IbznEtJyQywruQvBYEwwXs9PXll7au9Cinxpvxmi2HWGAFcrsFPYBACsJpmnbJXz7DhWcnOi4ER7Oxu8wTl+WO97K0pwZ18XAMu/qWDymQCorj7R7QNVUz0usUd1jbM2DSExVWTYtaZuycmsuCKWk2JVXWlZyT+I6nLehu1oUr4pF2bokh+kCUze/4/CUkHWINZnifk2pyTXynJFaZOT/XXvUdrj6CPptfTbI0qCmSFL7793qyJImdNF55E9RnJ7nF2tq78PTh5wT7nHS0jxg8+MP+ce02Wm6ZczMDvRLzXrdHXz95SNu9H8C9Un0fn+Gv4CfMQXfjxx3ZW97apX2QV1m+z5f2NHqa7reCFJ6FjUSzW7k+nyPd/+Q/kJ3USwmF4efxO4NKg==

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

avatar
Jan 4th 2024

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.