Injection "Symbol(vee-validate-field-instance)" not found.

[adirizky54]

What happened?

It seems there is an issue when use FieldContextKey

Reproduction steps

I think this error happen when use component from auto import

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  typescript: {
    typeCheck: true,
    strict: true,
  },
  modules: ['@vee-validate/nuxt'],
  veeValidate: {
    autoImports: true,
    componentNames: {
      Form: 'VeeForm',
      Field: 'VeeField',
      FieldArray: 'VeeFieldArray',
      ErrorMessage: 'VeeErrorMessage',
    },
  },
});

<script setup lang="ts"></script>

<template>
  <form>
    <VeeField v-slot="{ field }" label="Email" name="email">
      <FormItem :id="field.name">
        <input v-bind="field" placeholder="Test" />
      </FormItem>
    </VeeField>

    <button>Submit</button>
  </form>
</template>

Because when i import component from vee-validate directly, it's work

<script setup lang="ts">
import { Field } from 'vee-validate';
</script>

<template>
  <form>
    <Field v-slot="{ field }" label="Email" name="email">
      <FormItem :id="field.name">
        <input v-bind="field" placeholder="Test" />
      </FormItem>
    </Field>

    <button>Submit</button>
  </form>
</template>

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

[Vue warn]: injection "Symbol(vee-validate-field-instance)" not found. 
  at <FormItem id="email" > 
  at <Field label="Email" name="email" > 
  at <App> 
  at <NuxtRoot>

Demo link

https://stackblitz.com/edit/github-dlqgvf?file=composables%2FuseFormField.ts

Code of Conduct

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

[logaretm]

I'm suspecting Nuxt is importing two versions of vee-validate. Most likely due to the changes we did recently to the esm imports. I will need to investigate it more. Seems related to #4906

[logaretm]

I spent some time on this and it seems like the two symbols imported by your composable and the one being provided by vee-validate are different in this app environment. I'm not sure why this happens, but a probable cause is there are two versions of vee-validate that get imported/exported in the Nuxt environment.

I have seen a similar issues with other modules in the ecosystem like with Bootstrap vue which resorted to using string keys instead of symbols. I don't like that because while it would still work, it means something is fundementally wrong with how vee-validate interacts with Nuxt, some issues will remain as a result of that like #4906. I will try to spend more time on this.

Can you try adding this to your Nuxt config and see if it helps, this is a workaround at best:

  vite: {
    optimizeDeps: {
      exclude: ['vee-validate'],
    }
  }

[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 ('No such validator' when using defineComponent setup syntax #4906 ).
• Symbols used for injection (this issue)

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. Also it seems common in the ecosystem's modules all around. The change is here (41d82fd)

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

On a side note, your composable should ditch passing the name property since it will run within a field's context, passing a name makes it search for a form injection instead.

[adirizky54]

Thank you for the response @logaretm !! I can confirm that v4.14.6 fix this issue.