Skip to content

Slot props undefined when wrapped around v-if (Unhandled error during execution of scheduler flush) #6672

@lou-theo

Description

@lou-theo

Vue version

3.2.29

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-effzhm?file=src%2FApp.vue&terminal=dev

Steps to reproduce

I have a generic component (a table) that defines a slot.
This slot has a prop which is the data for "the current line to display"
As we can see in the repro link, there is no problem with component TableComponent which is pretty simple and has no v-if around the action slot
But with TableDataComponent which has a v-if around its action slot to see if the slot is defined before to display it, it seems that the first time the slot is displayed, it pass an undefined value has props and it throws some errors/warnings :
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.
Uncaught (in promise) TypeError: (destructured parameter) is undefined

What is expected?

if v-if is true, display the slot with defined props for the slot
if v-if is false, don't display the slot

What is actually happening?

"Uncaught (in promise) TypeError: (destructured parameter) is undefined" is thrown

System Info

No response

Any additional comments?

Currently i have a workaround which is to not destructure slot props and wrap it with a v-if like that

      <template #action="slotProps">
        <template v-if="slotProps?.item">
          my html value
        </template>
      </template>

but I have to use it every where I want to define a slot for my tableComponent, it is redundant

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions