Nuxt•3mo ago

Module '"#components"' has no exported member 'UFormGroup'

Trying to solve this issue where this will flood my consoles a lot:

[Vue warn]: Failed to resolve component: UFormGroup
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Register onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouteProvider key="/register" vnode= 
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
 route= 
Object { fullPath: "/register", hash: "", query: {}, name: "register", path: "/register", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: "/register" }
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade" mode="out-in" > 
  at <ToastProvider swipe-direction="right" duration=5000 > 
  at <Toaster key=0 > 
  at <TooltipProvider > 
  at <ConfigProvider use-id=fn<use-id> dir=undefined locale=undefined > 
  at <App > 
  at <App key=4 > 
  at <NuxtRoot>

[Vue warn]: Failed to resolve component: UFormGroup
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Register onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouteProvider key="/register" vnode= 
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
 route= 
Object { fullPath: "/register", hash: "", query: {}, name: "register", path: "/register", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: "/register" }
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade" mode="out-in" > 
  at <ToastProvider swipe-direction="right" duration=5000 > 
  at <Toaster key=0 > 
  at <TooltipProvider > 
  at <ConfigProvider use-id=fn<use-id> dir=undefined locale=undefined > 
  at <App > 
  at <App key=4 > 
  at <NuxtRoot>

So i added this to my register script as an attempted fix:

<script lang="ts" setup>
import { UForm, UFormGroup, UInput, UTextarea, UButton } from '#components';

<script lang="ts" setup>
import { UForm, UFormGroup, UInput, UTextarea, UButton } from '#components';

But i get this error: Module '"#components"' has no exported member 'UFormGroup' any thoughts?

3 Replies

kapa.ai•3mo ago

Hi @averwhy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error occurs because there is no component named UFormGroup exported by Nuxt UI or available in the Nuxt auto-imported components. In Nuxt UI v3, the component previously known as FormGroup has been renamed to FormField (and thus, the auto-imported component is now UFormField) as part of the migration to align with the Reka UI naming convention. You should use UFormField instead of UFormGroup in your imports and templates. So, update your import to:

<script lang="ts" setup>
import { UForm, UFormField, UInput, UTextarea, UButton } from '#components';
</script>

<script lang="ts" setup>
import { UForm, UFormField, UInput, UTextarea, UButton } from '#components';
</script>

And in your template, replace any usage of <UFormGroup> with <UFormField>. This change is documented in the Nuxt UI migration guide, which states: | v2 | v3 | |------------|--------------| | FormGroup | FormField | See the migration guide for more details. If you continue to reference UFormGroup, Nuxt will flood your console with "Failed to resolve component" warnings, as it cannot find or auto-import a component by that name. Switching to UFormField will resolve the issue and stop the warnings. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@267410788996743168> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

averwhyOP•3mo ago

yea that might do it

Gaming

Programming

Module '"#components"' has no exported member 'UFormGroup'

Did you find this page helpful?