[BUG] - Type instantiation is excessively deep and possibly infinite.

[sndrem]

Describe the bug Not sure if a bug, but when I tried to use the toFormikValidationSchema(Schema), I get a warning saying Type instantiation is excessively deep and possibly infinite.. This seems to stress the typescript server in vs code. If I comment out this line validationSchema={toFormikValidationSchema(Schema)} then VS Code works as expected. Not sure why this is. I have not had this problem in the past. I just updated to version 1.2.0.

To Reproduce Steps to reproduce the behavior:

1. Update to version 1.2.0
2. Add validationSchema={toFormikValidationSchema(Schema)} to your Formik component
3. It should give a warning about Type instantiation is excessively deep and possibly infinite

Expected behavior I expect the code to not give errors and validate my form as expected

Screenshots

Desktop (please complete the following information):

• MacOS Ventura 13.1

Node version:

Zod, Formik and zod-formik-adapter versions: zod: "^3.20.2", zod-formik-adapter: "^1.2.0", formik: "^2.2.9" Typescript: 4.9.4

Additional context I have tried to turn my computer on and off, restarted the ts server in vs code, and restarted vs code. It only seems to be working correctly if I do not include the validationSchema.

import { BodyLong, Heading, TextField } from "@navikt/ds-react";
import { FieldHookConfig, Form, Formik, useField } from "formik";
import { z } from "zod";
import { toFormikValidationSchema } from "zod-formik-adapter";
import styles from "../tiltaksgjennomforinger/Oversikt.module.scss";

const Schema = z.object({
  tiltakstypenavn: z.string({ required_error: "Tiltakstypen må ha et navn" }),
});

type SchemaValues = z.infer<typeof Schema>;

function Tekstfelt({
  label,
  name,
  ...props
}: { name: keyof SchemaValues; label: string } & FieldHookConfig<any>) {
  const [field, meta] = useField({ name, ...props });
  return <TextField label={label} {...field} error={meta.error} />;
}

export function OpprettTiltakstype() {
  const initialValues = { tiltakstypenavn: "" };
  return (
    <>
      <Heading className={styles.overskrift} size="large">
        Opprett ny tiltakstype
      </Heading>
      <BodyLong className={styles.body} size="small">
        Her kan du opprette eller redigere en tiltakstype
      </BodyLong>
      <Formik<SchemaValues>
        initialValues={initialValues}
        validationSchema={toFormikValidationSchema(Schema)} // TODO Se på toFormikValidationSchema og hvorfor den kneler Typescript-serveren
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
      >
        {() => (
          <Form>
            <Tekstfelt name="tiltakstypenavn" label="Navn" />
            <button type="submit">Opprett</button>
          </Form>
        )}
      </Formik>
    </>
  );
}

[sndrem]

If i downgrade to 1.1.1 then everything works as expected

[robertLichtnow]

Can you also provide the Typescript version that your TS server is using?

[sndrem]

4.9.4 is the typescript version being used. I have updated my original question as well.

[awkaiser-tr]

FWIW, I'm also seeing this error on 1.2.0 with TypeScript 4.7.4

Best I can tell, the only change since 1.1.1 that could possibly impact toFormikValidationSchema behavior would be the change from Zod ~3.14.4 to ^3.14.4, since Zod is up to 3.20.2 now. 🤔

Unfortunately, if I downgrade my project to exactly Zod 3.14.4 while remaining on Zod Formik Adapter 1.2.0, then restart my TS server in VS Code, the error still occurs! 😖 NPM dependency hell is "fun" to troubleshoot when project behavior can differ by when dependencies were frozen in lockfile.

For now, downgrading both zod & zod-formik-adapter is the only thing that provides relief:

"zod": "~3.14.4",
"zod-formik-adapter": "~1.1.1"

... and then we're back to this library having an opinion about React compatibility 😦

[samuelg0rd0n]

This issue happens to me, as well 😦

"typescript": "5.1.6",
(...)
"zod": "^3.22.4",
"zod-formik-adapter": "^1.2.0",

[salmanrf]

I'm getting this error as well, has there been any fix ?

[valajczech]

Same here on 1.3.0. The only solution I could find for now is either to @ts-ignore it or downgrade to 1.1.1 as per @sndrem's answer.