Uncaught (in promise) TypeError: schema.~validate is not a function

[wenis]

What happened?

Hi! I have some pretty simple sign in / sign up forms I've created using vee-validate / valibot / and vue3. They were working fine until running an npm update this morning and updating to 4.14.3. I'm pretty sure this is specific to valibot because I did a quick test using zod and everything still works fine.

Here is a snippet of the form code:

import * as v from 'valibot';
import { useForm } from 'vee-validate';
import { toTypedSchema } from '@vee-validate/valibot';

const schema = toTypedSchema( 
  v.object({
    email: v.pipe(v.string('Email is required.'), v.email('Are you sure your email is correct?'), v.nonEmpty('required')),
    password: v.pipe(v.string('Strong password required.'), v.minLength(12, 'Password must be at least 12 characters.')),
    rememberMe: v.optional(v.boolean(), false)
  }),
);

const { errors, values, defineField, handleSubmit } = useForm({
  validationSchema: schema,
  initialValues: {
    rememberMe: false,
  }
});

Reproduction steps

1.npm update 2. 3. ...

Version

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

What browsers are you seeing the problem on?

• [X] Firefox
• [X] Chrome
• [X] Safari
• [X] Microsoft Edge

Relevant log output

index.js:5654 Uncaught (in promise) TypeError: schema.~validate is not a function
    at safeParse (index.js:5654:37)
    at Object.cast (vee-validate-valibot.esm.js:89:28)
    at resolveInitialValues (vee-validate.esm.js:2146:29)
    at useForm (vee-validate.esm.js:2164:33)
    at setup (SignUp.vue:86:57)
    at callWithErrorHandling (runtime-core.esm-bundler.js:199:19)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7870:25)
    at setupComponent (runtime-core.esm-bundler.js:7831:36)
    at mountComponent (runtime-core.esm-bundler.js:5179:7)
    at processComponent (runtime-core.esm-bundler.js:5145:9)

Demo link

no

Code of Conduct

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

[wenis]

this works...

import { useForm } from 'vee-validate';
import { object, string, boolean } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const schema = toTypedSchema(
  object({
    email: string().email("Are you sure your email is correct?").min(1, "Email is required."),
    password: string().min(12, "Password must be at least 12 characters."),
    rememberMe: boolean().optional().default(false)
  }),
);

const { errors, values, defineField, handleSubmit } = useForm({
  validationSchema: schema,
  initialValues: {
    rememberMe: false
  }
});

[wenis]

Some of my output from npm list:

├── @types/node@20.16.13
├── @typescript-eslint/eslint-plugin@6.21.0
├── @typescript-eslint/parser@6.21.0
├── @vee-validate/valibot@4.14.3
├── @vee-validate/zod@4.14.3
├── @vitejs/plugin-vue@4.6.2
├── @vueuse/components@10.11.1
├── @vueuse/core@10.11.1
├── autoprefixer@10.4.20
├── axios@1.7.7
├── eslint-plugin-vue@9.29.1
├── eslint@8.57.1
├── pinia@2.2.4
├── prettier@3.1.1
├── tslib@2.8.0
├── typescript@5.6.3
├── valibot@0.42.1
├── vee-validate@4.14.3
├── vite-plugin-full-reload@1.2.0
├── vite-tsconfig-paths@5.0.1
├── vite@5.4.9
└── vue@3.5.12

[logaretm]

This is because the v4.14.x now use the latest valibot release which is 1.x, so upgrading valibot should make it work.

Can you try that?

[wenis]

@logaretm Thank you for the response, and all your hard work on this project. I did notice this in my troubleshooting, and I did have to modify my package.json file to:

"valibot": "^1.0.0-beta",

I promise you I tried this before I posted this bug, but apparently I forgot to restart vite. Once I changed my package.json, ran npm update, and restarted vite everything is working as expected.

Just to document this for search engine purposes, running npm update will not update your dependencies to the beta version if you already have a non-beta dependency for valibot in your package.json file. The latest current release of Valibot is 0.42.1.

This is a personal project I'm working on, so it's not a big deal, but I would imagine this could potentially cause an issue.