[Bug]: getFieldState imported from incorrect module

[atreya786]

Describe the bug

The current implementation of the form UI module incorrectly imports the getFieldState function from the useFormContext module instead of the useForm module. This leads to a runtime error where getFieldState is undefined, causing the form functionality to break. The correct approach should be to import getFieldState from the useForm module to ensure proper functionality of the form component.

Affected component/components

Self created from component with shadcn-ui and react-hook-form

How to reproduce

1. Clone the repository containing the ui.shadcn.com project.
2. Navigate to the components/ui/form.jsx file within the project directory.
3. Observe the import statement for the getFieldState function.
4. Note that getFieldState is imported from the useFormContext module instead of useForm.
5. Start the development environment of the ui.shadcn.com project.
6. Access any page or component that utilizes the form UI component.
7. Attempt to interact with the form, such as submitting it or entering data.
8. Observe the runtime error indicating that getFieldState is not a function.
9. Notice that the form functionality is broken due to the undefined getFieldState function.
10. Confirm the bug by verifying that the form component fails to function properly due to the incorrect import of getFieldState.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Browser: Brave
Operating System: Windows 11
Node.js: 18.17.1
Package Manager: 10.2.4

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[mo-shahab]

is this what you get ? i am having a hard time working on this thing, i tried all sorts of work arounds then later realized that it is the internal error in the component..

Unhandled Runtime Error

TypeError: getFieldState is not a function
Source

components\ui\form.tsx (47:36) @ fieldContext

  45 |   const { getFieldState, formState } = useFormContext()
  46 |
> 47 |   const fieldState = getFieldState(fieldContext.name, formState)
     |                                    ^
  48 |
  49 |   if (!fieldContext) {
  50 |     throw new Error("useFormField should be used within <FormField>")

[glangston83]

i had the same error here: https://github.com/shadcn-ui/ui/issues/3033#issuecomment-2194452209

made the update from @atreya786 at https://github.com/atreya786/ui/commit/27627bc37b337dc3bef582ceeaca921e60b62200 and fixed it for me as well.

[zerosym]

Double check the docs for useFormContext and make sure that you are passing the entire return of your useForm call into the provider component, which Shadcn renames as Form instead of FormProvider.

https://react-hook-form.com/docs/useformcontext

The getFieldState is not a function error sounds very much like it's being omitted from the arguments to Form. There is no issue with the Shadcn implementation in terms of this.