Destructuring props no longer works without experimental features
Vue version
3.3
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-hbtqav?file=src/App.vue
Steps to reproduce
Open the example in a new tab to see the console.log
's.
You can see that the destructured variable in the Works
component has been logged, but the one in the NotWorks
component is undefined.
What is expected?
Both props are available. This worked below 3.3
What is actually happening?
Looking at https://github.com/nuxt/nuxt/issues/20789 and https://github.com/nuxt/nuxt/pull/20795 it seems like when we do not enable reactivity transform or the new props destructuring feature, then the destructured props are just lost after compilation.
Probably related to this code path: https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/script/definePropsDestructure.ts#L31
System Info
No response
Any additional comments?
No response
If this feature graduates from experimental to stable, snippets like Nuxt's would break, anyway, because error
prop would suddenly become reactive, right? So, while destructuring props might be a valid pattern that should be considered by the compiler, just regressing to previous behavior may not be future-proof.