Build error: "`name` is specified more than once" when using named slots and v-bind if object has a key of `name`
Vue version
3.2.45
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-peyj9y?terminal=dev
Steps to reproduce
<script setup lang="ts">
const myObject = {
name: 'someName',
};
</script>
<template>
<slot name="action" v-bind="myObject" /> // error: 'name' is specified more than once, so this usage will be overwritten
</template>
- Open the repro link
- Run
npm run build
- Verify the error
What is expected?
I would expect Typescript to understand name
shouldn't be merged with the object being passed to v-bind.
What is actually happening?
TS fails to undertand the name
prop in <slot />
is different from objects being bound to it.
In this example, <slot name="foo" v-bind="{ name: 'bar'}" />
clash and it breaks the build command.
System Info
System:
OS: macOS 13.1
CPU: (10) x64 Apple M1 Pro
Memory: 8.98 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 1.22.19 - ~/Desktop/CL/remx/apps/remx/node_modules/.bin/yarn
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Browsers:
Chrome: 109.0.5414.87
Safari: 16.2
Safari Technology Preview: 16.4
npmPackages:
vue: ^3.2.45 => 3.2.45
### Any additional comments?
_No response_
This should likely be addressed in the Volar repo, not here.
Because Volar/vue-tsc transforms the template into something TS can understand (a form of TSX). So your issue needs to be fixed in that step. Vue Core does not really have a say here in what TS sees.
Please track https://github.com/johnsoncodehk/volar/issues/2308.