Update `ErrorSchema` type definition to better handle `string`

[TheOneTheOnlyJJ]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.24.7

Current Behavior

Right now, I have the following useState:

const [extraErrors, setExtraErrors] = useState<ErrorSchema<IUserDataBoxConfigCreateInput> | undefined>(undefined);

where IUserDataBoxConfigCreateInput is:

interface IUserDataBoxConfigCreateInput {
  storageId: string;
  name: string;
  description?: string;
}

and I try to set the new state with the following function, to preserve any existing errors:

setExtraErrors((prevExtraErrors: ErrorSchema<IUserDataBoxConfigCreateInput> | undefined): ErrorSchema<IUserDataBoxConfigCreateInput> | undefined => {
  const NEW_ERROR = "Could not get username availability.";
  if (prevExtraErrors === undefined) {
    return {
      name: {
        __errors: [NEW_ERROR]
      } satisfies FieldErrors
    } satisfies ErrorSchema<IUserDataBoxConfigCreateInput>;
  }
  return {
    ...prevExtraErrors,
    name: {
       __errors: prevExtraErrors.name?.__errors === undefined ? [NEW_ERROR] : [...prevExtraErrors.name.__errors, NEW_ERROR]
    } satisfies FieldErrors
  } satisfies ErrorSchema<IUserDataBoxConfigCreateInput>;
});

Unfortunately, this yields a type error:

Type '{ __errors: string[]; }' is not assignable to type 'ErrorSchema<string>'.
  Type '{ __errors: string[]; }' is not assignable to type 'string'.ts(2322)
UserDataBoxConfigCreateInput.ts(8, 3): The expected type comes from property 'name' which is declared here on type 'ErrorSchema<IUserDataBoxConfigCreateInput>'
(property) name?: ErrorSchema<string> | undefined

After playing with the types and getting angry after not managing to fix it, I asked ChatGPT what's wrong with my code, also providing it with the ErrorSchema type definition from RJSF for context. And so, a surprising response was given:
"
When T = string, then ErrorSchema<string> resolves to:

FieldErrors & {
  [key in keyof string]?: ErrorSchema<T[key]>
}

But keyof string is not never!, it is actually string, number, Symbol, etc., because in TypeScript:

keyof string === keyof String === "length" | "toUpperCase" | ...

So ErrorSchema<string> ends up not just being FieldErrors, but some monster like:

{
  __errors?: string[];
  length?: ErrorSchema<...>;
  toUpperCase?: ErrorSchema<...>;
  ...
}

And then your code:

name: { __errors: [NEW_ERROR] } satisfies FieldErrors

Is not assignable to this complex monster structure.
"
While I am not exactly sure if this is the case or not, it also provided a solution:
"
Update ErrorSchema to only recurse on objects, like this:

export type ErrorSchema<T = any> =
  FieldErrors & (T extends object ? {
    [key in keyof T]?: ErrorSchema<T[key]>;
  } : {});

This says: "If T is an object (like a form field with properties), recurse. Otherwise, stop at FieldErrors."
This will now allow things like:

const errs: ErrorSchema<{ name: string }> = {
  name: {
    __errors: ["Nope"]
  }
};

And disallow ErrorSchema<string> from expecting keys like length, charAt, etc.
"
Sure enough, making the change to ErrorSchema locally fixed my error.

Expected Behavior

I expect no type error.

Steps To Reproduce

No response

Environment

Anything else?

This is the first time an LLM has fixed a library issue for me. I am impressed.

[TheOneTheOnlyJJ]

For anyone reading this having this same issue, I got around it by keeping the extraErrors state as RJSFValidationError[] like this:

const [extraErrors, setExtraErrors] = useState<RJSFValidationError[]>([]);

and also keeping any previously set errors by setting it with the following:

setExtraErrors((prevExtraErrors: RJSFValidationError[]): RJSFValidationError[] => {
  return [
    ...prevExtraErrors,
    {
      property: ".name",
      message: "Could not get name availability.",
      stack: "Could not get name availability." // Notice how redundant this is for custom errors like this one
    } satisfies RJSFValidationError
  ];
});

and using toErrorSchema directly in the Form like this:

<Form
  ...
  extraErrors={toErrorSchema(extraErrors)}
  ...
/>

[heath-freenome]

@TheOneTheOnlyJJ Have you tried using the ErrorSchemaBuilder? It was designed to overcome these issues.

[TheOneTheOnlyJJ]

@TheOneTheOnlyJJ Have you tried using the ErrorSchemaBuilder? It was designed to overcome these issues.

Hmm, I wasn't aware this existed until now. I've tried implementing it in my Form component, but it does not behave like I would like it to.

Is it possible to update the docs to include a usage example demo? To me, it isn't clear where in a function component it should be initialised, what the difference between addErrors and setErrors is and how to make sure the Form properly re-renders with the new errors when an error gets added/set.

As of now, I initialise it like this in my component that holds the form:

const errorSchemaBuilderRef = useRef<ErrorSchemaBuilder>(new ErrorSchemaBuilder());

and I use it like a normal React.MutableRefObject:

errorSchemaBuilderRef.current.setErrors("Could not get username availability.", "name");

and provide the built ErrorSchema to the Form like this:

<Form ... extraErrors={errorSchemaBuilderRef.current.ErrorSchema} ... />

But this does not re-render the Form immediately when a new error gets added/set, only after a change occurs.

These problems hint at my need for a docs example, which would be very welcome.

[TheOneTheOnlyJJ]

I've also tried wrapping both the ErrorSchemaBuilder in a useMemo and also the ErrorSchemaBuilder.ErrorSchema, but still, I do not get the newly added/set errors immediately, only after I either change a Form value or after I manually re-render the Form by closing and opening the Dialog component holding it.

The error gets set correctly. It's just the re-render that's not working as expected.

Also, is there any way to have these custom errors go away like the default AJV ones do when using liveOmit?