Description
Vue version
3.4.21
Link to minimal reproduction
Steps to reproduce
It looks like the following conditions must be met:
- Script setup with Typescript
- Be in DEV mode
import * as something
- Try to use v-bind shorthand
:something
Also be careful with HMR: it seems like after the page worked once (e.g. because I used the long form), the shorthand then seems to work. But it really doesn't, as demonstrated after a server restart.
What is expected?
Works just like :something=something
.
What is actually happening?
:something
props is bound to undefined. See repro link.
You can make it work by switching to long form.
System Info
Not relevant, see SFC Playground repro.
Any additional comments?
It is clear in SFC repro that api
is omitted from returned state by SFC compiler:
const __returned__ = { MyComp }
If you switch the playground to prod mode, the result is actually correct and works:
return (_openBlock(), _createBlock(MyComp, { api: api }))
Somehow it also seems to work in JS, so I suspected this is TS removing imports that are not used at all or only in type positions. But as my repro shows, adding console.log(something)
properly preserves the import in JS output, but the SFC binding is still compiled incorrectly, so something else is going on.