[Bug]: Vee-validate fails when auto importing Form component

[Zackery747]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-bsx2ja?file=nuxt.config.ts

Steps to reproduce

You only have to run the project.

Describe the bug

Cannot destructure property 'componentField' of 'undefined' as it is undefined.

This is caused by Vee-Validate being used in the Form component. It only happens when the Form components are automatically imported. The Form works perfectly if you manually import the Form components.

Expected behavior

No error is being thrown.

Conext & Screenshots (if applicable)

<script setup lang="ts">
import { h } from 'vue';
import { useForm } from 'vee-validate';
import { toTypedSchema } from '@vee-validate/zod';
import * as z from 'zod';

const formSchema = toTypedSchema(
  z.object({
    username: z.string().min(2).max(50),
  })
);

const { handleSubmit } = useForm({
  validationSchema: formSchema,
});

const onSubmit = handleSubmit((values) => {
  toast({
    title: 'You submitted the following values:',
    description: h(
      'pre',
      { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' },
      h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))
    ),
  });
});
</script>

<template>
  <Form class="w-2/3 space-y-6" @submit="onSubmit">
    <FormField v-slot="{ componentField }" name="username">
      <FormItem v-auto-animate>
        <FormLabel>Username</FormLabel>
        <FormControl>
          <Input type="text" placeholder="shadcn" v-bind="componentField" />
        </FormControl>
        <FormDescription> This is your public display name. </FormDescription>
        <FormMessage />
      </FormItem>
    </FormField>
    <Button type="submit"> Submit </Button>
  </Form>
</template>

[sadeghbarati]

Thanks for the report this because index.ts ignored from auto-import in Nuxt installation

Only .vue files will be auto-imported

And I export vee-validate Form and Field components in index.ts

Will check it

[sadeghbarati]

@Zackery747

For now install @vee-validate/nuxt

https://vee-validate.logaretm.com/v4/integrations/nuxt/

And change Field auto-import name to FormField

[Zackery747]

Thanks for the feedback @sadeghbarati! 💪

Just manually importing the form like this also works perfectly for now. 😃

import {
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'

[zernonia]

@sadeghbarati Im thinking of instead of importing component based on .vue extension, maybe we can add import based on the components exported in each index.ts file.

Thus would eliminate the issue whereby some component wasn't imported such in this case, as well as Pagination.
WDYT?

[sadeghbarati]

@zernonia

That's good idea
I tested scanning only index.ts files, but that does seem not working

https://stackblitz.com/edit/github-xkryhq?file=nuxt.config.ts,.nuxt%2Fcomponents.d.ts

---

Another Stackblitz using Nuxt modules

https://stackblitz.com/edit/github-xkryhq-egbi1f?file=nuxt.config.ts,.nuxt%2Fcomponents.d.ts,modules%2Fshadcn-vue.ts

---

I made PR to Nuxt to add prepend (unshift) opt to addComponentsDirs in Nuxt Kit once it's ready in 3.9 we can create a module for shadcn-vue too

But we have to add a warning about not adding radix-vue/nuxt auto-import when the user using shadcn-vue components

[sadeghbarati]

/cc @DamianGlowala sry for mentioning, I could not find a solution for this problem so I though it's better to ask a Nuxter

Please first look at these links

• https://www.shadcn-vue.com/docs/installation/nuxt.html#configure-nuxt-config-ts (how to config auto-import components directories in nuxt)
• https://github.com/radix-vue/shadcn-vue/blob/dev/apps/www/src/lib/registry/new-york/ui/form/index.ts
• https://github.com/radix-vue/shadcn-vue/blob/dev/apps/www/src/lib/registry/new-york/ui/pagination/index.ts

Some of the components don't need to be wrapped in another Vue component, for example in Form we just export Form and Field as FormField from vee-validate

The problem is Nuxt can't scan those components that are exported inside index.ts
I know in shadcn-vue Nuxt Configure we mention scanning only .vue extensions but even if I edit that to this 👇 , Nuxt scan still is not working well

dirs.unshift({
  path: '~/components/ui',
  pattern: ['**/index.ts'],
  prefix: 'Ui',
  pathPrefix: false
})

[zernonia]

Will be fix by #196

[zernonia]

You can now use shadcn-nuxt module to autoImport the component correctly.

[orenmizr]

latest nuxt + shadcn from today... copied code from docs -> failed. imported manually - works. @zernonia