ZodFormDialog throws TypeError

[KirioXX]

Description

I tried to build a form dialog with zod. This is my zod schema is this:

export const Partner = z.object({
  partner_name: z.string().describe('Name of the partner'),
  partner_key: z.string().describe('Key of the partner'),
  partner_domain: z.string().describe('Domain of the partner'),
});
export type TPartner = z.infer<typeof Partner>;

When I try to open the form dialog I get this error message:

Uncaught TypeError: Cannot destructure property 'items' of 'props' as it is null.

Link to Reproduction

No response

Steps to reproduce

1. Create a Form Dialog
2. Pass in the zod schema
3. Try to open the dialoge

Saas UI Version

2.6.1

Chakra UI Version

2.8.2

Browser

Arc 1.35.0, Chromium Engin 123.0.6312.59

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

No response

[linear[bot]]

SUI-444 ZodFormDialog throws TypeError

[Pagebakers]

I just gave this a go and runs OK here, can you share the full code please?

[KirioXX]

Hi Pagebakers, Thanks for the response. This is my code:

import { FormDialog } from '@saas-ui/react'
import { useTranslation } from 'react-i18next'
import { z } from 'zod'

export const Partner = z.object({
  partner_name: z.string().min(1),
  partner_key: z.string().min(1),
  partner_domain: z.string().min(1),
})

export type TPartner = z.infer<typeof Partner>

function NewPartnerModal({
  disclosure,
  onSubmit,
}: {
  disclosure: {
    isOpen: boolean
    onOpen: () => void
    onClose: () => void
    onToggle: () => void
    isControlled: boolean
    getButtonProps: (props?: any) => any
    getDisclosureProps: (props?: any) => any
  }
  onSubmit: (partner: TPartner) => void
}) {
  const { t } = useTranslation(['partners', 'translation', 'validation'])
  // const schema = {
  //   partner_name: {
  //     label: `${t('partner_name')}`,
  //     type: 'string',
  //     minLength: 1,
  //     rules: {
  //       required: `${t('partner_name_is_mandatory', { ns: 'validation' })}`,
  //     },
  //   },
  //   partner_key: {
  //     label: `${t('partner_key')}`,
  //     type: 'string',
  //     minLength: 1,
  //     rules: {
  //       required: `${t('partner_key_is_mandatory', { ns: 'validation' })}`,
  //     },
  //   },
  //   partner_domain: {
  //     label: `${t('partner_domain')}`,
  //     type: 'string',
  //     format: 'uri',
  //     rules: {
  //       required: `${t('partner_domain_is_mandatory', { ns: 'validation' })}`,
  //       format: `${t('partner_domain_format', { ns: 'validation' })}`,
  //     },
  //   },
  // }
  return <FormDialog title={t('new_partner')} schema={Partner} {...disclosure} onSubmit={onSubmit} />
}

export default NewPartnerModal

To get around the issue for now I use the json schema (the commented out code) that somehow works for now.

[Pagebakers]

Thanks! Zod isn't supported in the default FormDialog, but you import it from here:

import { FormDialog } from '@saas-ui/forms/zod'

Make sure you install @saas-ui/forms as a dependency as well.

[KirioXX]

Perfect! Thanks Pagebakers, that works perfect and also resolves a different issue I had.