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

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

Closed
jods4 opened this issue Mar 13, 2024 · 0 comments · Fixed by #10518
Closed

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

jods4 opened this issue Mar 13, 2024 · 0 comments · Fixed by #10518
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: compiler

Comments

@jods4
Copy link
Contributor

jods4 commented Mar 13, 2024

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.

@edison1105 edison1105 added 🐞 bug Something isn't working scope: compiler 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Mar 14, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Apr 30, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: compiler
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants