useField not attached to Form when used in package

[h-sigma]

Hello,

I am using useField for my custom input elements inside my custom UI library. The field-level rules works correctly, but the form level validation does not work specifically when I import this library as a package and attempt to use my custom UI components.

When I try to do a demo inside the UI library's project, the validation works as expected.

In fact, in my consuming project (this is the project into which I am importing my UI library as a package), if I use raw VField or useField, the form-level validation works as expected.

What I have realized is that the field values are not being added to the form's values, which is because of the fields not "registering" to the form somehow.

Any guidance or ideas would be greatly appreciated. I am posting a code snippet as a sanity check.

// This composable-like method is being used in multiple custom components' setup methods to generate a field.
export const useInputMixin = (props: {
    type?: string;
    value?: InputValue;
    name: string;
    modelValue: InputValue;
    rules?: RuleExpression<unknown>;
}) => {
    //vee validate
    const name = toRef(props, 'name');
    const rules = toRef(props, 'rules');
    const {
        value: inputValue,
        errorMessage,
        handleBlur,
        handleChange,
        meta,
        checked,
        checkedValue,
        name: namez
    } = useField(name, rules, {
        type: props.type,
        checkedValue: props.value,
    });

    handleChange(props.modelValue);

    watch(
        () => props.modelValue,
        newValue => {
            handleChange(newValue);
        }
    );

    return { inputValue, errorMessage, handleBlur, handleChange, meta, checked, checkedValue };
};

[logaretm]

I think this because your library and the target app are both having two different vee-validate packages bundled in them. This means both will have different symbols which would prevent injecting stuff like the form context.

This could be solved by you making sure that vee-validate is marked as an external when you bundle your library so it never gets bundled in it. So it would use the project's vee-validate installation instead.

[h-sigma]

You are a god send. That is exactly what was happening. I had vee-validate as a peer dependency in my package.json for my library, but it was still being bundled. I had to modify my vite.config.ts as follows, and it works now.

build:
    rollupOptions: {
-    external: ['vue'],
+    external: ['vue', 'vee-validate']
    }

[olemarius]

Same issue, but in a monorepo where we do not bundle the package as a library. The fix in this case was to use dedupe. Here's the commit to a repro of the issue similar to my environment (pnpm, turborepo, vite, vue 3):

olemarius/vee-validate-repro@a3c1df8