Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
sqal opened this issue Jan 2, 2024 · 1 comment
Closed
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working scope: script-setup

Comments

@sqal
Copy link
Contributor

sqal commented Jan 2, 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

@edison1105 edison1105 added 🐞 bug Something isn't working scope: script-setup labels Jan 4, 2024
@baiwusanyu-c
Copy link
Member

baiwusanyu-c commented Jan 4, 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.

@baiwusanyu-c baiwusanyu-c added the has workaround A workaround has been found to avoid the problem label Jan 4, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Jan 19, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working scope: script-setup
Projects
None yet
Development

No branches or pull requests

3 participants