Using useFormState in a react-admin Form seems broken

Question

I try using the hook useFormState from react-hook-form in a react-admin form I am a beginner for both modules so maybe I use them wrong but I searched through both of the documentations and I could not find something saying I was having a wrong use.

Here is my code

import { useFormState } from 'react-hook-form'; import { Create, Form, TextInput, } from 'react-admin'; const MyCustomComponent = () => { const { errors, isDirty } = useFormState(); return ( <div> <h3>State</h3> <pre>{JSON.stringify({ errors, isDirty }, null, 2)}</pre> </div> ); }; export const CreateComponent = () => ( <Create> <Form> <TextInput source="title" /> <TextInput source="description" /> <MyCustomComponent /> </Form> </Create> ); 

I don't understand why but I keep getting the error Cannot read properties of null (reading 'control') I read for other subjects that it meant my hook call wasn't in a FormProvider but it seems pretty obvious that my custom component is inside a FormProvider

If I add those lines inside my component:

const context = useFormContext(); console.log(context); 

context is null

I really don't understand and can't make it work Please could you tell me if I am forgetting something ? Should I add default values since I am using typescript ?

Answer 1

This issue could be due to having duplicate versions of react-hook-form (one direct dependency in your project and one brought by react-admin).

You can run npm list react-hook-form to check if you have duplicate versions.

Alternatively you can check your lockfile (package-lock.json or yarn.lock depending on your package manager).

To dedupe the package you can run npm dedupe react-hook-form or yarn dedupe react-hook-form.

Or, edit the lockfile manually.

Or, use yarn’s resolutions or npm’s overrides:

// in packages.json { // ... "resolutions": { "react-hook-form": "7.54.2" } }