TypeError: Cannot read properties of undefined (reading 'NestedIntNullableFilterObjectSchema') when generating Yup schema

[element-software]

Bug description

I have a working Nextjs setup with Prisma, Typescript, React Hook Form, and Yup - it's a CRM system.

I am using the types from the Prisma Client in my code and have no issues so far. I introduced Yup validation by directly creating a schema (similar to the types generated by Prisma), and then stumbled across this great looking project, and so I installed it as per the instructions. I setup my form with the Yup resolver (which I've successfully used in the past by creating a Yup schema directly) for React Hook Form. I passed in the DonationCreateSchema imported from prisma/generated/schemas which is the default output folder. I am getting the following error when I start the app:

 ⨯ TypeError: Cannot read properties of undefined (reading 'NestedIntNullableFilterObjectSchema')
    at Module.NestedIntNullableFilterObjectSchema (./prisma/generated/schemas/internals.ts:97:159)
    at eval (./prisma/generated/schemas/objects/NestedDecimalNullableWithAggregatesFilter.schema.ts:17:53)
    at (ssr)/./prisma/generated/schemas/objects/NestedDecimalNullableWithAggregatesFilter.schema.ts (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\app\admin\donations\create\page.js:1546:1)
    at __webpack_require__ (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\webpack-runtime.js:33:42)
    at eval (./prisma/generated/schemas/internals.ts:144:115)
    at (ssr)/./prisma/generated/schemas/internals.ts (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\app\admin\donations\create\page.js:556:1)
    at __webpack_require__ (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\webpack-runtime.js:33:42)
    at eval (./prisma/generated/schemas/findUniqueCustomer.schema.ts:6:68)
    at (ssr)/./prisma/generated/schemas/findUniqueCustomer.schema.ts (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\app\admin\donations\create\page.js:468:1)
    at __webpack_require__ (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\webpack-runtime.js:33:42)
    at eval (./prisma/generated/schemas/index.ts:37:84)
    at (ssr)/./prisma/generated/schemas/index.ts (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\app\admin\donations\create\page.js:545:1)
    at __webpack_require__ (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\webpack-runtime.js:33:42)
    at eval (./src/components/donation/create/Form.tsx:18:83)
    at (ssr)/./src/components/donation/create/Form.tsx (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\app\admin\donations\create\page.js:2096:1)
    at __webpack_require__ (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\webpack-runtime.js:33:42)
    at eval (./src/components/donation/create/index.tsx:8:63)
    at (ssr)/./src/components/donation/create/index.tsx (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\app\admin\donations\create\page.js:2118:1)
    at __webpack_require__ (D:\Repos\Charity Manager CRM\crm-fullstack\.next\server\webpack-runtime.js:33:42)

The code for my form is provided in the How to reproduce - I've simplified the code (removed my components etc and using native HTML elements) - this still gives me the error so I've ruled out my components being an issue.

I'm not asking for help with writing the form, but more to understand what is causing the issue with the generated Yup schemas based on the Prisma schema I have. It's not too different to the example for this repo. Your help would be greatly appreciated.

How to reproduce

You can setup a simple Nextjs Typescript project, install React Hook Form and set up Prisma with the schema I've provided. Then generate the Yup schemas, create a simple form like my code below:

"use client";
import { SubmitHandler, useForm } from "react-hook-form";
import { FC,  } from "react";
import classNames from "classnames";
import { DonationCreateSchema } from "../../../../prisma/generated/schemas";
import { yupResolver } from "@hookform/resolvers/yup";

interface CreateDonationProps {
  className?: string;
}

const CreateDonationForm: FC<CreateDonationProps> = ({
  className,
}) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    mode: "onChange",
    resolver: yupResolver(DonationCreateSchema),
  });

  const onSubmit: SubmitHandler<any> = async (data) => {
    console.log("onSubmit", data);
  };

  return (
    <div
      className={classNames(
        "text-sm flex flex-col items-center justify-center mb-4 bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl",
        className
      )}
      data-testid="donation_create_form"
    >
      <div className="grow flex flex-col py-2 align-middle px-2 w-full">
        <div className="w-full text-center pt-2 text-lg font-bold">
          Create Donation
        </div>
        <hr className="h-px my-2 bg-gray-200 border-0 dark:bg-gray-500" />
        <form
          className="grow flex flex-col py-2 align-middle px-2 w-full gap-5"
          onSubmit={handleSubmit(onSubmit)}
        >
          <>
            <label htmlFor="amount" className="text-green-500">
              Amount
            </label>
            <input
              id="amount"
              type="text"
              {...register("amount", { required: true })}
              required
              className="w-full"
            />
          </>
          {errors ? (
            <p className="text-red-500 p-4">{JSON.stringify(errors)}</p>
          ) : null}
          <button
            type="submit"
            className="w-full p-3 bg-black text-white"
          >
            SUBMIT
          </button>
        </form>
      </div>
    </div>
  );
};

export default CreateDonationForm;

As soon as you start the app you will see the errors I'm getting. This is a client component in my app.

Expected behavior

I'd expect to be able to use the generated Yup schema to validate my form with React Hook Form using the Yup resolver - this could be a Yup resolver issue, however I have also tried calling the validate method on the generated Schema and it gives me the same errors (this method does not rely on the Yup resolver).

Prisma information

generator client {
  provider = "prisma-client-js"
}

generator yup {
  provider = "prisma-yup-generator"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Customer {
  id               Int        @id @default(autoincrement())
  firstName       String?     @db.VarChar(255)
  lastName        String?     @db.VarChar(255)
  email            String?    @db.VarChar(255)
  phone            String?    @db.VarChar(255)
  createdAt       DateTime?   @default(now())
  updatedAt       DateTime?   @default(now())
  title            String?    @db.VarChar(255)
  contactEmail    Boolean?    @db.Boolean @default(false)
  contactPhone    Boolean?    @db.Boolean @default(false)
  contactPost     Boolean?    @db.Boolean @default(false)
  contactSms      Boolean?    @db.Boolean @default(false)
  contactWhatsapp Boolean?    @db.Boolean @default(false)
  donations        Donation[]
}

model Donation {
  id         Int       @id @default(autoincrement())
  amount     Decimal?  @db.Decimal(10, 2)
  date       DateTime? @db.Timestamp(6)
  giftAid   Boolean?
  createdAt DateTime? @default(now())
  updatedAt DateTime? @default(now())
  recurring  Boolean? @db.Boolean @default(false)
  customer   Customer @relation(references: [id], fields: [customerId])
  project    Project  @relation(references: [id], fields: [projectId])
  customerId Int
  projectId  Int
}

model Project {
  id             Int        @id @default(autoincrement())
  name           String?    @db.VarChar(255)
  archived       Boolean?
  description    String?    @db.VarChar(255)
  total          Decimal?   @db.Decimal(10, 2)
  startDate     DateTime?  @db.Date
  endDate       DateTime?  @db.Date
  target         Decimal?   @db.Decimal(10, 2)
  createdAt     DateTime?  @db.Timestamp(6)
  updatedAt     DateTime?  @db.Timestamp(6)
  financialYear String?    @db.VarChar(255)
  donations      Donation[]
}

Environment & setup

• OS: Windows 11
• Database: PostgreSQL
• Node.js version: v20.10.0
• IDE: VSCode

Prisma Version

@prisma/client: 5.10.2
prisma: 5.10.2
@hookform/resolvers: 3.3.4
react-hook-form: 7.48.2

[takamasa1999]

I've been experiencing the same.
Does anyone have an idea of how to solve the issue or a workaround?
I'm so tired of defining all the schema myself since my project uses many tables and relations...