NuxtIcon + Vuetify - Warning: Slot "default" invoked outside of the render function

[XStarlink]

Hi, thanks for this pluggin which is really great.

I'm using NuxtIcon by integrating it with Vuetify, and I noticed that when a component is hidden and then displayed again (like a menu for example), when it is displayed again I have as many errors in console as icons displayed by the component.

I have created a StackBlitz that uses Vuetify 3 with Nuxt Icon to reproduce what I encounter on my application. (https://stackblitz.com/edit/nuxt-starter-uij6h7) The steps to reproduce:

• Open the menu
• Close the menu
• Open the menu then click on the 3 dots icon to open the sub menu
• Look at the console (If it doesn't work the first time you can change pages and try again)

When I comment on the use of the component that wraps NuxtIcon in thevuetify.ts plugin I no longer get these warnings. Maybe I'm not using the vue h() function correctly in the vuetify plugin..

[XStarlink]

I add here some elements of answer which I received in the Vuetify discord and which can surely help! Thank you very much @KaelWD.

@KaelWD — Today at 12:45 PM

maybe something to do with async setup/suspense? the slot it's complaining about is vue's transition component, and definitely is in the render function. currentInstance is the > nuxt-icon component which has https://github.com/nuxt-modules/icon/blob/main/src/runtime/Icon.vue#L47 although we are calling slots in setup here: https://github.com/vuetifyjs/vuetify/blob/next/packages/vuetify/src/components/VIcon/VIcon.tsx#L38

[vcasy]

I am not using vuetify and have the same issue. It's generating a lot of very confusing error messages.

I uninstalled this plugin and tried using the package @iconify/vue. No error.

So it's definitely a bug with nuxt-icon only.

As said this generates a lot of confusing error messages.

Full error message (for Google):

[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

[alniv94]

any fix on this?

[XStarlink]

I still have a lot of warnings about this, but I haven't found any solutions.

[KaelWD]

It's a vue bug really. loadIconComponent resolves while vue is rendering other components, so __restore sets currentInstance back to NuxtIcon when normalizeSlot is expecting it to be null.

https://github.com/vuejs/core/blob/a95e612b252ae59eaf56e0b8ddba66948d4ac20e/packages/runtime-core/src/apiSetupHelpers.ts#L521

[XStarlink]

It's a vue bug really. loadIconComponent resolves while vue is rendering other components, so __restore sets currentInstance back to NuxtIcon when normalizeSlot is expecting it to be null.

https://github.com/vuejs/core/blob/a95e612b252ae59eaf56e0b8ddba66948d4ac20e/packages/runtime-core/src/apiSetupHelpers.ts#L521

Thanks for your explanations!

[mostafaznv]

Same here. I am also encountering this error. It's interesting that all users who are using nuxt-icon with vuetify report this error when using nuxt-icon inside layout components. Maybe it's related to the suspense/async system.

[alniv94]

It's a vue bug really. loadIconComponent resolves while vue is rendering other components, so __restore sets currentInstance back to NuxtIcon when normalizeSlot is expecting it to be null.

https://github.com/vuejs/core/blob/a95e612b252ae59eaf56e0b8ddba66948d4ac20e/packages/runtime-core/src/apiSetupHelpers.ts#L521

we wait for vue to fix this?

[Zehir]

Is there an Issue open for this on Vue side ?

[jd-solanki]

You can use IconCSS in meantime

import { IconCSS } from '#components'

[HendrikJan]

I've still got this problem but import { IconCSS } gives me the error [unimport] failed to find "IconCSS" imported from "#components"

The error says something about VIcon, but the problem comes from a <v-btn> without an icon.

This gives the error (inside a nuxt layout):

   <v-btn>
              {{ link.name }}
   </v-btn>

But this doesn't:

   <v-btn>
              Something static
   </v-btn>