'No such validator' when using defineComponent setup syntax

[readio]

What happened?

We have just updated to the latest @vee-validate/nuxt, version 4.14.3.

We are now getting an error Uncaught (in promise) Error: No such validator 'required' exists.

After some investigation it appears that this happens when using the defineComponent setup, instead of <script setup>

I have included a link to stackblitz to replicate this.

Reproduction steps

No response

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/nuxt-starter-kgmsew?file=pages%2Findex.vue

Code of Conduct

• I agree to follow this project's Code of Conduct

[LukasGrubis]

Same issue

[Oscarsgc]

@readio @LukasGrubis
I have the same issue.

I tried downgrading versions and at some point I got another error (../.../vee-validate does not provide an export named 'Field') in the same component I experienced the 'No such validator' issue.

Then I tried to fix that and using this comment: Unable to autoImport components in nuxt and it worked.

Then I installed latest vee-validate (4.14.4) and I see no issue with the validators.

It's kind of a workaround but it's working at the moment.

Im using nuxt 3.13, vue 3.5.12

In order to use vee-validate/rules I created a plugin vee-validate.client.js containing the following:

import { Form, Field, ErrorMessage, defineRule } from 'vee-validate';
import { required, email, image, max, min, one_of, confirmed, numeric, regex } from '@vee-validate/rules';

export default defineNuxtPlugin((nuxtApp) => {
    if (import.meta.client) {
        defineRule('required', required);
        defineRule('email', email);
        defineRule('image', image);
        defineRule('max', max);
        defineRule('min', min);
        defineRule('oneOf', one_of);
        defineRule('confirmed', confirmed);
        defineRule('numeric', numeric);
        defineRule('regex', regex);
    }
    nuxtApp.vueApp.component('VeeForm', Form);
    nuxtApp.vueApp.component('VeeField', Field);
    nuxtApp.vueApp.component('VeeErrorMessage', ErrorMessage);
});

In my nuxt.config.ts im not using the veeValidate configurations, and everything is working.
Im using defineComponent setup syntax in some components and other components use <script setup> syntax

[logaretm]

Spent some time on this, I tagged 4.14.5 in attempt to resolve this but it doesn't. I think the main issue is vee-validate is being imported twice, presumably once by the module and once by the plugin.

I'm not sure where to go from here, since vee-validate module looks the same as other modules in the ecosystem.

[jjohnson1994]

Seeing this too, have added a custom plugin as a work around

[logaretm]

I spent even more time on this. My theory is when vite optimizes vee-validate it splits or copies it in two different chunks. Causing some side-effect reliant logic to break which includes:

• Global rules registration (this issue).
• Symbols used for injection (Injection "Symbol(vee-validate-field-instance)" not found. #4909)

My last resort here is to make it so that vee-validate's nuxt module excludes vee-validate from the optimization step which seems to solve both issues. The change is here (41d82fd)

I tagged v4.14.6 just now that works well in the given example, can you guys verify?

[readio]

@logaretm I can confirm the errors are resolved using the latest version (4.14.6).

Thanks for looking into this and providing a fix.