Union between 2 pipelines returns strange error

[YassienW]

I'm trying to create a field that accepts either an ip address or a url,

const Schema = object({
  address: union([
    pipe(string(), trim(), minLength(1, "Address is required"), ip()),
    pipe(string(), trim(), minLength(1, "Address is required"), url()),
  ]),
});

when validating i get a strange error:

Uncaught ValiError: Invalid type: Expected string but received "test"

You can see this live here

[fabian-hiller]

This is expected by our current implementation but I know that the error is strange in this edge case. The problem is that both union options require a string. Therefore, union can't output the specific error message of ip or url because they would contradict each other. Instead, it tries to output a general error message based on the expected types. This usually results in error messages like: Invalid type: Expected Array | Object but received "foo". You can overwrite the error message via the second argument of union or access the .issues property of the issue returned to access the sub issues of ip and url. You can try it out in our playground.

import * as v from 'valibot';

const Schema = v.object({
  address: v.union(
    [
      v.pipe(
        v.string(),
        v.trim(),
        v.minLength(1, 'Address is required'),
        v.ip(),
      ),
      v.pipe(
        v.string(),
        v.trim(),
        v.minLength(1, 'Address is required'),
        v.url(),
      ),
    ],
    'Custom error message for union',
  ),
});

const result = v.safeParse(Schema, {
  address: 'test',
});

if (result.issues) {
  const firstIssue = result.issues[0];
  console.log('Message:', firstIssue.message);
  console.log('Sub issues:', firstIssue.issues);
}

Another hint: You can simplify your schema if you want to. Here is a code example.

import * as v from 'valibot';

const Schema1 = v.pipe(v.string(), v.trim(), v.nonEmpty('Address is required'));

const Schema2 = v.object({
  address: v.union([v.pipe(Schema1, v.ip()), v.pipe(Schema1, v.url())]),
});