Skip to content

v-bind shorthand (3.4) does not work with TS + "import * as" #10515

Closed
@jods4

Description

@jods4

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNqFUslOwzAQ/RXLQmpBxTnAqaRUgHoACaiAG+YQJdPg1rEt2ympovw7Y4eWqmK5zfLezJulpVfGsHUNdExTl1thPHHga0NkpsoJp95xesmVqIy2npyQzJHMCLKwuiIDlqDt2NINLnaQ+82NrkwP4JQlwQsNOEUMV7lWTktgUpdDJDO9OsZ4mvS9sRM6HiojMw/oEZJWm9M8VByHvgnG0mQPQEcoEYsuRIk6tMI52kDjNJCEBPtovMCmnI5JzIRcJqX+uIsxb2sYbeP5O+SrH+JL14QYp3MLDuwap9nlfGZL8H169vwADdq7ZKWLWiL6j+QT4ELqoLGHXdeqQNl7uKj2Nq5XqPLFzRoPym2HCkIDsot4TnHXYee/jf4t94ydRx5XHW5xe6fDR4hHKGAhFMytNm74ioKM4PTtv8MVYh0NQtqWHJlAZv3JyXSKSnDOWLbglHSoAilJzzm88NeXoTRo4pOFL/IEC02wjl7hb9HuEwp97X0=

Steps to reproduce

It looks like the following conditions must be met:

  1. Script setup with Typescript
  2. Be in DEV mode
  3. import * as something
  4. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.🐞 bugSomething isn't workingscope: compiler

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions