shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
75.37k stars 4.72k forks source link

[bug]: Typescript error in form component #5831

Open kadeau-devteam opened 1 week ago

kadeau-devteam commented 1 week ago

Describe the bug

There is typescript errors within form component.

Property formState does not exist in useFormContext.

Than for part

const fieldState = getFieldState(fieldContext.name, formState)

getFieldState expect no arguments.

Than later we have error with usage of: const { error, formItemId } = useFormField().

TS2339: Property error does not exist on type { id: string; name: string; formItemId: string; formDescriptionId: string; formMessageId: string; }

Error in typescript brake process build for Nextjs.

Affected component/components

Form

How to reproduce

Test form component within nextjs application.

Codesandbox/StackBlitz link

No response

Logs

next build

  ▲ Next.js 14.2.4
  - Environments: .env.local

   Creating an optimized production build ...
 ⚠ For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
 ⚠ For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

./src/components/ui/form.tsx:45:26
Type error: Property 'formState' does not exist on type '{ getFieldState: () => {}; getValues: () => {}; watch: () => {}; setValue: () => {}; register: () => {}; }'.

  43 |   const fieldContext = React.useContext(FormFieldContext)
  44 |   const itemContext = React.useContext(FormItemContext)
> 45 |   const { getFieldState, formState } = useFormContext()
     |                          ^
  46 |
  47 |   const fieldState = getFieldState(fieldContext.name, formState)
  48 |
 ELIFECYCLE  Command failed with exit code 1.

System Info

Linux Mint, nodejs v22.11.0, nextjs 14.2.4

Before submitting