Скачать или смотреть Fixing useFormState Errors in react-admin Forms Due to Duplicate react-hook-form Versions

Learn how to resolve the 'Cannot read properties of null (reading control)' error when using useFormState from react-hook-form inside react-admin forms by preventing duplicate versions of react-hook-form.
---
This video is based on the question https://stackoverflow.com/q/79464423/ asked by the user 'Paulo-99' ( https://stackoverflow.com/u/16349513/ ) and on the answer https://stackoverflow.com/a/79467934/ provided by the user 'slax57' ( https://stackoverflow.com/u/3975522/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Using useFormState in a react-admin Form seems broken

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
Introduction

When integrating useFormState from react-hook-form within a react-admin form, you may encounter the error:

[[See Video to Reveal this Text or Code Snippet]]

This usually indicates that the hook cannot access the expected form context provider.

Why This Happens

The root cause is often multiple versions of react-hook-form loaded simultaneously:

react-admin depends on react-hook-form internally.

Your project may have a separate direct dependency on a different version.

When this happens, the context provided by one version is not recognized by the other, causing useFormState to fail.

How to Diagnose

Run the following command in your project root to list all installed versions of react-hook-form:

[[See Video to Reveal this Text or Code Snippet]]

Check your lockfile (either package-lock.json or yarn.lock) for multiple versions of react-hook-form.

How to Fix

1. Deduplicate react-hook-form

For npm:

[[See Video to Reveal this Text or Code Snippet]]

For yarn (with yarn-deduplicate installed):

[[See Video to Reveal this Text or Code Snippet]]

This helps ensure only one version remains.

2. Use Package Management Overrides

Force a single version of react-hook-form using overrides or resolutions depending on your package manager.

Yarn (package.json):

[[See Video to Reveal this Text or Code Snippet]]

npm (v8+ package.json):

[[See Video to Reveal this Text or Code Snippet]]

Replace 7.54.2 with your preferred consistent version.

3. Reinstall Dependencies

After applying dedupe or overrides, run:

[[See Video to Reveal this Text or Code Snippet]]

Best Practices

Avoid directly installing a different version of react-hook-form unless necessary.

Check compatibility of react-admin with your react-hook-form version.

Use useForm or useFormContext hooks inside components that are descendants of the Form component provided by react-admin.

Summary

The "Cannot read properties of null (reading 'control')" error when using useFormState within react-admin forms is typically caused by conflicting versions of react-hook-form. Resolving the issue involves:

Identifying multiple versions

Deduplicating them

Using package manager overrides to enforce a single version

This ensures that your custom components using useFormState successfully access the form context wrapped by react-admin.