Getting errors while using components that render template with v-for

[geminigeek]

i am getting the following error on page load, i am using nuxt with primevue ui, i am also mentioning a reproduction,

just look for errors in console, the example in reproduction is a menu component taken from this page

https://primevue.org/menubar/

here is the reproduction https://stackblitz.com/edit/nuxt-starter-8p9dxd?file=app.vue

app.vue:25 Uncaught (in promise) TypeError: Cannot destructure property 'item' of 'undefined' as it is undefined.
    at app.vue:25:30
    at Object.renderFnWithContext [as item] (chunk-RAKT47ZN.js?v=49241719:2175:13)
    at vue3-lazy-hydration.js?v=49241719:92:51
    at Array.forEach (<anonymous>)
    at traverseChildren (vue3-lazy-hydration.js?v=49241719:88:33)
    at waitForAsyncComponents (vue3-lazy-hydration.js?v=49241719:109:3)
    at vue3-lazy-hydration.js?v=49241719:157:67

[seriouslysean]

I've noticed this also locally while testing a lazy load implementation and managed to fix it. The issue is from destructuring slotProps as I don't think they're being properly defaulted to an object when lazily hydrated. You instead need to use the variable slotProps directly and be more defensive. Simplified version here:

You're doing this:

<template #item="{ item, props, hasSubmenu, root }">
  <a v-ripple class="flex align-items-center" v-bind="props.action">

But this works instead:

<template #item="slotProps">
  <a v-ripple class="flex align-items-center" v-bind="slotProps?.props.action">

See the fixed version where I made the changes, https://stackblitz.com/edit/nuxt-starter-dpmh3k?file=app.vue.

[geminigeek]

thanks , its working like how you implemented