[BUG] 500 Maximum call stack size exceeded. Customize this page

[tropikow]

When using the component with @nuxt/icon v2.0.0 and Nuxt v4.1.3, the application throws a “Maximum call stack size exceeded” error.
This happens as soon as I render any icon in a component.
Example:
<template> <Icon name="uil:github" style="color: black" /> </template> Error Output 500 Maximum call stack size exceeded.
Environment:
{ "name": "nuxt-callkit", "type": "module", "private": true, "dependencies": { "@nuxt/icon": "2.0.0", "nuxt": "4.1.3", "vue": "3.5.22", "vue-router": "4.5.1" } }
nuxt.config.ts:
// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ compatibilityDate: '2025-07-15', devtools: { enabled: true }, css: ['~/assets/css/main.css'], modules: ['@nuxt/icon'], })
What I Tried
I suspected the issue might be caused by a subdependency conflict.
After removing the ^ from the version numbers in my package.json, the project built correctly, but the runtime error persisted.

[hugoattal]

I've got the same bug using NuxtUI. The icons work fine within components (like UButton), but they seem to cause the bug with the UIcon components.

On a side note, I'm using imports like this:

<template>
    <Icon name="uil:github" />
</template>

<script setup lang="ts">
import Icon from "@nuxt/ui/components/Icon.vue"
</script>

When the element is globally registered, it seems to work fine, but I can't do that in my situation.

EDIT: it seems not to work with other import method in a case of reexporting the component (like a component library)