Subscribe on changes!

Build error: "`name` is specified more than once" when using named slots and v-bind if object has a key of `name`

avatar
Jan 23rd 2023

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_
avatar
Jan 23rd 2023

This should likely be addressed in the Volar repo, not here.

https://github.com/johnsoncodehk/volar

avatar
Jan 23rd 2023

would you mind clarifying why Volar? is it because of vue-tsc? 🤔

avatar
Jan 23rd 2023

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.

avatar
Jan 24th 2023

Thanks y'all for the clarification, much appreciated.