react-hook-form / devtools

📋 DevTools to help debug forms.

Get started | API | Form Builder | FAQs | Examples

Features

• Built with performance, UX and DX in mind
• Embraces native HTML form validation
• Out of the box integration with UI libraries
• Small size and no dependencies
• Support Yup, Zod, AJV, Superstruct, Joi and others

Install

npm install react-hook-form

Quickstart

import { useForm } from 'react-hook-form';

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

Sponsors

Thanks go to these kind and lovely sponsors!

Past sponsors

Backers

Thanks go to all our backers! [Become a backer].

Contributors

Thanks go to these wonderful people! [Become a contributor].

devtools's Issues

little-state-machine causes React native to crash

It tries to access something not there

I do not if it is intended because of not supporting RN? Or something just we can fix?

Thanks, great tool BTW!

[Bug]: Dirty and Touched flags don't trigger in dev tools when registred with a nested object key.

Version Number

7.11.1

Codesandbox

https://gyazo.com/f8ab439071d6a8ea3268de7fdeb8bd43

Steps to reproduce

I couldn't get devtools (3.1) to work at all in codesandbox, but i added a GIF

1. Create a form with a nested object registration like patient.firstName. For example:

        <TextInput 
          id = "firstName" 
          label = "First Name" 
          htmlName = "firstName"
          placeholder = "John"
          type = "text"
          required = {true}
          error={errors?.patient?.firstName?.message}
          inputProps = {{...register(`patient.firstName`)}}
        />

2. navigate to the input and make it dirty or touched

Expected behaviour

I'd expect RHF and dev tools to track it as dirty and touched, but dev tools does not.

What browsers are you seeing the problem on?

Firefox, Chrome, Edge

Relevant log output

-

Code of Conduct

• I agree to follow this project's Code of Conduct

formState.dirtyFields.has error with v6

I previously wrote about this error in issue:
#36

i try:

• 1.2.0;

Now i update to 2.1.0 but error still the same

is devtools capable with 6 version?

when i try to use it with 6 version a got a error:

react-hook-form-devtools.js:288 Uncaught TypeError: formState.dirtyFields.has is not a function
    at react-hook-form-devtools.js:288
    at Array.map (<anonymous>)
    at Panel (react-hook-form-devtools.js:281)
    at renderWithHooks (react-dom.development.js:16240)
    at updateFunctionComponent (react-dom.development.js:18327)
    at beginWork$1 (react-dom.development.js:20150)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:441)
    at beginWork$$1 (react-dom.development.js:25737)

Hook:

const { control, watch } = useForm({
    defaultValues: {
        src: {},
    },
})

JSX:

<Controller
  control={control}
  name="src"
  render={({ value, onChange, onBlur }) => (
    <Select
      selected={value?.number}
      onChange={onChange}
      onBlur={onBlur}
      options={options}
    />
  )}
/>;

If i disable devtools everything works fine.

Love the idea of this, but feels invasive

@bluebill1049 I was excited to see the post when you announced the RHF Devtools! However, both myself and my developers felt like it was a bit too invasive and hard to get setup right for a development only tool.

I think this would fit much nicer as a Browser Extension and i think it is possible. If there is interest, I can take a look at what all would be required to do something like this instead.

TypeError: null is not an object (evaluating 'methods.control')

Using DevTool with basic example has a compile error.

Sandbox

`3.0.2` is incompatible with `RHF` `7.13.0`

When trying to use @hookforms/[email protected] with [email protected] throws an error:

TypeError
Cannot read property 'current' of undefined

CSB with reproduction

https://codesandbox.io/s/sleepy-raman-v3n08?file=/src/App.js

Don't include in Production build, like React Query Devtools

From https://github.com/tannerlinsley/react-query-devtools#usage

By default, React Query Devtools are not imported and used when process.env.NODE_ENV === 'production', so you don't need to worry about excluding them during a production build.

And the code looks easy, too! https://github.com/tannerlinsley/react-query-devtools/blob/v1.0.12/index.js

===

I really like this utility (thanks!) but don't want to have to remember to remove from my component to build an optimized bundle, as RFH itself is the 1st (IE11) and 6th (core) heaviest things I've got (is there room for improvement for IE11?) and the 2nd heaviest is a dependency of RFH DevTools.

Details from an unminified build:

Report Errors

I'm using on Next js

ReferenceError: window is not defined
at Object. (D:\source\fe-codebase\node_modules\react-hook-form-devtools\dist\react-hook-form-devtools.js:419:35)

---

littleStateMachine.setStorageType(window.localStorage);

TypeError: reactHookForm.useFormState is not a function

Hey, after installing @hookform/devtools I encountered into this error: "TypeError: reactHookForm.useFormState is not a function"

This is the error on the website:
9 | };
10 |
11 | const Header = ({ setVisible, control }: Props) => {

12 | const { isValid } = useFormState({
13 | control,
14 | });

below is my code:

import { DevTool } from "@hookform/devtools"; return ( <> <form onSubmit={handleSubmit(onSubmit)} className="h-100 d-flex flex-column" > <div className={"d-flex flex-wrap flex-row"}> {inputs.map((input) => { return ( <div style={{ marginRight: 35 }}> <CustomInput register={register} control={control} error={errors[input.name]} watch={watch} formState={formState} defaultValues={input.defaultValues} setValue={setValue} {...input} /> </div> ); })} </div> <hr /> <div className="d-flex justify-content-between"> <button type="submit" className="btn btn-primary"> Submit </button> </div> </form> <DevTool control={control} /> </> );

Thanks :)

DevTool not rendering fields when reset it called.

Hello,

There is an issue when using reset and DevTool.

Here is an example of the issue

Link

Calling reset make the DevTool not render the fields

latest Devtools throws error w/ latest hook-form

Description

The basic example on the main devtools page here throws the following error:

Uncaught TypeError: Cannot read property 'current' of undefined

The above error occurs in react-hook-form 6.5.0 but not in the the previous release 6.4.1.
Diff between react-hook-form 6.5.0 and 6.4.1

I have observed the error in development mode on next.js using typescript(tsx) w/ React's strict mode enabled. Have not tested CRA or javascript.

System

Ubuntu: 20.04
Node: v12
Package Manager: yarn 1.24

Package Versions

"react":"latest"
"next":"latest"
"typescript":"latest"
"react-hook-form": "6.5.0"
"@hookform/devtools": "2.0.5"

Error Logs

localhost-1598190583810.log
localhost-1598190633960.log

Screenshots

Whitespace text node error

Heya,

I have a field that conditionally is shown on a page (when a checkbox is clicked) and it's value gets set and reset occasionally. When I reset the field and hide it, the following error crops up in the console:

Whitespace text nodes cannot appear as a child of <tbody>. Make sure you don't have any extra whitespace between tags on each line of your source code.

Unsure what exactly causes it without having had a look at the source. Just thought I'd raise it in case it rings any bells?

errorMessage.trim() is not a function

Disclaimer: I'm using react-hook-form v5 and react-hook-form-devtools v1 but I think this issue could be still present.

I've got the exception reported in the issue title because what I put as errorMessage is an object and not directly a string.
I do such a thing because I'm using yup validation library and I'm setting default error messages as they suggest as objects in order to include a value to replace in the final error string.

https://github.com/jquense/yup#using-a-custom-locale-dictionary

This works perfectly except the devtool.
Something like replacing this

devtools/src/panelTable.tsx

Line 216 in c6ce945

{errorMessage.trim()}

with

typeof errorMessage === 'string' ? errorMessage.trim() : JSON.stringify(errorMessage))

could probably be effective.

ie11 support?

Hi,

Thanks for the great library. I've been using it for all my projects, but it does not work on IE11.
Can you add support for this one?

I got a Syntax error in index.js
if (process.env.NODE_ENV === 'production') {
module.exports = {
DevTool: () => null,
}

Can this be changed to
if (process.env.NODE_ENV === 'production') {
module.exports = {
DevTool: function DevTool() {
return null;
}
};
} else {
module.exports = require('./dist/react-hook-form-devtools.js');
}

Deploy v3 to npm

It doesn't look like npm has the latest version @bluebill1049. May need to update the package.json.

"version": "3.0.0-rc.2"

❯ npm info @hookform/devtools

@hookform/[email protected] | MIT | deps: 6 | versions: 31
React Hook Form dev tool to help debugging forms
https://react-hook-form.com

keywords: react, react-component, devtool, devtools, form, forms, form-validation, validation, hookform, react-hook-form, typescript

dist
.tarball: https://registry.npmjs.org/@hookform/devtools/-/devtools-2.2.1.tgz
.shasum: 2d88414d375199e193c2611b770b194b7752a623
.integrity: sha512-VQh4kqwUOpz9LCDzIP0aJ4qnD/ob8Gp09L8gDy++9XtL66z6g8kbCynUvBrJm4qbCNdH0M7/Spm3AUjJqUuFlA==
.unpackedSize: 617.2 kB

dependencies:
@emotion/core: ^10.0.28      @emotion/styled: ^10.0.27    @types/lodash: ^4.14.152     little-state-machine: ^3.0.1 lodash: ^4.17.15             react-simple-animate: ^3.3.8 

maintainers:
- jorisre <[email protected]>
- bluebill1049 <[email protected]>
- kotarella1110 <[email protected]>

dist-tags:
beta: 3.0.0-alpha.4  latest: 2.2.1        next: 3.0.0-rc.2     

published 7 months ago by bluebill1049 <[email protected]>

resize-feature

Hello guys,

I am using react-hook-form daily on my job on all projects and I found it a little bit difficult to use devtools because of the fixed width. The true benefit of using react-hook-form and devtools is the fact of its simplicity and bundle size.

The resizing issue was open last year, but it's not live yet. So I have decided to contribute and push that feature so we could get it live shortly for everyone.

Branch: resize-feature

Demo: storybook

In addition to the resizing feature, changes are made for the tracking of each field collapse state to be in sync with expand/collapse button on the global level.

There is an issue with the global expand/collapse button.

If you expand only one field, the global state remains to expand. When you have multiple fields expanded and you want to collapse them all you have to click twice (EXPAND then COLLAPSE).

Besides resizing, I have some ideas about devtools customization (theme). 💯

Work is still in progress btw. Looking forward to your opinions/suggestions.

The view is not readable

Allow multiple forms/devtool instances

Working on an app which has many forms—now the DevTool isn't included in the production bundle, we've been able to leave the DevTools in (which really helps the team debug issues). However we do have multiple different form contexts in different parts of the app (a common one is a page with a form, then a modal with another form).

Currently, it's impossible to view multiple forms in the DevTool—as one sits in front of the other, and toggling it open and closed triggers both to open and close.

Either need to allow multiple forms in a single DevTool, or provide a way to toggle multiple.

FieldArray inputs don't update touched/dirty fields

DevTools does not update the displayed form input state dirty, touched. Specifically, field array inputs where the name is something like ingredients.0.description will correctly display the updated input value as the user types, however its dirty and touched states will always be false. Not all inputs seem to be affected, a single text input not rendered with fields from useFieldArray seem to behave correctly.

Reproduction of the bug is available on CodeSandbox

Steps to reproduce:

1. Type or change the value in the "name" field (on the first line)
2. Type or change the value in any of the "description" fields (the field array)
3. Open react-hook-form DevTools (the pink icon in the bottom right of the browser)
4. See that the ingredients fields did not update their dirty or touched values despite not matching defaultValue and having blurred off the input
5. See that the name field shows dirty: true, touched: true correctly
6. See the stringified formState shows the correct touched/dirty values for all ingredients

Slightly more info available on this Stack Overflow post

Does a babel remove @hookform/devtools plugin exist ?

I which remove @hookform/devtools from a package dependencie, because a error occur when my app build.

I set @hookform/devtools as devDependencies in my package. Should I change it ? If so, my bundle size will still by the same ?

getStore error in storybook v6 mdx

state machine error

probably some init error, cuz devtool loads ok if pages are switched/re-rendered (while in SPA context)

conflicting peer dependency requirements between @hookform/[email protected] and [email protected]

I was using "react-hook-form": "^5.4.2" so when I installed this devtools package via npm install @hookform/devtools -D which resulted in "react-hook-form-devtools": "^1.1.3", but I saw this message:

@hookform/[email protected] requires a peer of react-hook-form@>=6.0.0 but none is installed. You must install peer dependencies yourself.

I wasn't aware my RHF was outdated so then I updated my package.json, ran install, then I saw this:

[email protected] requires a peer of react-hook-form@^5.6.1 but none is installed. You must install peer dependencies yourself.

So it looks like those 2 have conflicting peer dependency requirements.

TypeError: methods is null when using <DevTool>

Describe the bug

After the initial installation of the library and the DevTool, and a simple setup from the docs, this error gets shown:

With the [TS] V7 I get a different error getValues is not a function.
https://codesandbox.io/s/eager-sun-jt4df?file=/package.json:169-177

V7

• JS Template
• TS Template

V6

• JS Template
• TS Template

Expected behavior
No error should be thrown.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox
• Version: 89
• @hookform/devtools: next
• react-hook-form: 7.8.3

add process.env.NODE_ENV control display devtool

maybe cant control only display in process.env.NODE_ENV === 'development' env

so we can do not need to delete Component when we deploy (or avoid to forget to delete)

DevTools does not show input value, when using Controller

Describe the bug
When using Controller to wrap a third party input component, the field is registered and appears in the DevTools list, however does not show a value.

To Reproduce
Sanbox Link

Expected behavior
Field value should be visible for these fields in DevTools.

Desktop (please complete the following information):

• OS: MacOS Catalina
• Browser Latest Chrome

[Bug]: `@hookforms/devtools@latest` doesn't work with `react-hook-form@latest` (`3.1.0` and `7.13.0`)

Version Number

7.13.0

Codesandbox/Expo snack

https://codesandbox.io/s/sleepy-raman-v3n08?file=/src/App.js

Steps to reproduce

Just open the Codesandbox and the error will be thrown.

Expected behaviour

DevTools should work as expected. Downgrading to [email protected] makes the problem go away.

What browsers are you seeing the problem on?

Chrome

Relevant log output

TypeError
Cannot read property 'current' of undefined
    at Panel (https://v3n08.csb.app/node_modules/
hookform/devtools/dist/index.cjs.development.js:358:79
renderWithHooks
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:14985:18
mountIndeterminateComponent
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:17811:13
beginWork
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19049:16
HTMLUnknownElement.callCallback
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3945:14
Object.invokeGuardedCallbackDev
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3994:16
invokeGuardedCallback
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4056:31
beginWork$1
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:23964:7
performUnitOfWork
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22776:12
workLoopSync
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22707:5
renderRootSync
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22670:7
performSyncWorkOnRoot
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22293:18
scheduleUpdateOnFiber
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21881:7
updateContainer
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25482:3
eval
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26021:7
unbatchedUpdates
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22431:12
legacyRenderSubtreeIntoContainer
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26020:5
Object.render
https://v3n08.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26103:10
$csb$eval
/src/index.js:6:9

Code of Conduct

• I agree to follow this project's Code of Conduct

3.0.0-rc.0 Cannot read property 'ref' of undefined

Using hook form 7 rc.8 and devtools 3 rc.0 I get the above mentioned error with any field containing a dot (nested path).
Example CSB: https://codesandbox.io/s/keen-napier-9i9hr?file=/src/App.js

Contributor

Hi @bluebill1049 ,

I've been working with react-hook-forms for a while and the results are great. In return I would love to contribute to this repo in any way I can.

Cheers, sigfried.

new build is broken the final publish version

I think the problem is due to the index.js is missing as part of the publish, we should do what do you have done at main-repo. @kotarella1110

**Describe the bug**

Describe the bug
This bug seems to arise when trying to track the touched and dirty states of custom Controller components that have nested values. In this example, I have set up a few scenarios with issues i have run into. There are 4 fields in the UI and I will refer to them in order top to bottom.

Field 1 and 2 have different names

Field 1 - touch and dirty works as expected. If you select the field and then leave, the Touched value in the dev tools will update. If you type into the field, Dirty will update as well
Field 2 - Touched does not work, nor does Dirty

Field 3 and 4 have the same name but one is nested: exampleRequried2 and nested.exampleRequred

Field 3 - if you touch this field, it will update Touched for both field 3 and field 4. Same with Dirty even though the value won't update.
Field 4 - same as Field 2 except now the state is affected by field 3

Codesandbox link (Required)
https://codesandbox.io/s/react-hook-form-issue-with-controlled-nested-fields-urm00?file=/src/index.tsx

Originally posted by @iKrushYou in react-hook-form/react-hook-form#5349

[Bug]: useFieldArray error with append (latest versions of devtools and hook-form)

Version Number

v7.14.0

Codesandbox/Expo snack

https://codesandbox.io/s/keen-moore-5p7c4?file=/src/App.js

Steps to reproduce

1. Update to the latest versions of devtools and react-hook-form (4.0.0 and v7.14.0)
2. Use useFieldArray with a default item
3. Register the array items using the Controller component
4. Try to append an additional element
5. Should see the error Cannot read property '_f' of undefined

Expected behaviour

I'd expect the DevTool to keep working after the versions upgrade. Moving back to v.7.12.2 of react-hook-form and v3.1.0 it works correctly. Also, replacing Controller with the function register it keeps working even after the dependencies upgrade.

What browsers are you seeing the problem on?

Chrome

Relevant log output

TypeError: Cannot read property '_f' of undefined
(anonymous function)
src/panel.tsx:48
  45 | .map(([name, value], index) => {
  46 |   childIndex++;
  47 | 
> 48 |   if (!value._f) {
     | ^  49 |     return (
  50 |       <PanelChildren
  51 |         key={name + childIndex}

Code of Conduct

• I agree to follow this project's Code of Conduct

_getWatch is not a function

I have been using the devtools without issue until just recently. Now i am getting this error.

here are my relevant dependancies
"@hookform/resolvers": "^2.6.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-hook-form": "~7.12.1",
"@hookform/devtools": "~3.0.2",

any suggestions as to what might be a solution would be greatly appreciated. If i remove the devtools this error goes away, so im semi confident this is a devTool issue

Small DX feature request

When using Devtools inside a FormProvider it would be good if we didn't have to specify the control prop anymore. Similar to how it works with useWatch/useFieldArray - control isn't required in this case.

Step to do in order for the RHFD form showing up

I've installed the app, but haven't been able to figure out how to make the UI appear.
Note:

• I include it in the child components, not on the App.js
• My react, and other package are latest.

devtools v. 2.0.4 not disabled in production build

can I disable the devtools in production builds automatically or do I have to remove it every time everywhere in code for production ?

[Bug]: Regression bug generated by releases v7.15.3 (Form Reset)

Version Number

7.15.3

Codesandbox/Expo snack

https://codesandbox.io/s/eloquent-breeze-gywwy?file=/src/Form.tsx

Steps to reproduce

Scenario 1

1. Enter any string in the first name field
2. Click on the reset button
3. Enter any string in the last name field
4. Check the dev tool
   Actual: you should find both first & last names fields isDirty equals tor true

Scenario 2

1. Enter any string in the first name field
2. Enter any string in the last name field
3. Click on the Save button (note that I reset the form with newly saved data after save)
4. Change the value in the first name field
5. Check the dev tool
   Actual: you should find both fields has isDirty as false

Expected behaviour

Scenario 1
Expected: you should find only the last name field isDirty equals tor true

Scenario 2
Expected: you should find the first name field isDirty equals tor true

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Is this auto feature-flagged on prod?

Just added this to my project and wondering if I have to create a feature flag myself not to render this on prod, or whether this is stripped out on NODE_ENV=production by default?

PS: LOVE THE IDEAAAAA ❤️

Stopped working after upgrade to 2.2.0

After upgrade to 2.2.0 this error showed up. I'm using react-hook-form 6.3.2

Cannot use reset() with @hookform/devtools

Describe the bug
When I try to use Devtools and use reset() function.
All remain fields are removed and nothing is reset.

To Reproduce

Just simply add devtools to the form. Everything will be normal again, when the devtools is removed.

Codesandbox link (Required)
https://codesandbox.io/s/bug-with-devtools-dyk9l?file=/src/App.js

Expected behavior
It should run correctly along with enabled Devtools.

Desktop (please complete the following information):

• OS: Windows
• Browser Microsoft Edge
• Version 91.0.864.48 (Official build) (64-bit)

Additional context
I thought the reason came from the recent unstable versions of react-hook-form, but now I find out the culprit is @hookform/devtools.

setValue does not set the value of an object field correctly

Describe the bug
When using setValue to set the value of a field which is an object (for example field name: objectField.value) it does not set the value.
However, it works if you have a field named objectField.

To Reproduce

See CodeSandbox for Demo

Expected behavior
Field value should correctly set the object key value.

DevTools together with Material UI creates warning

When using DevTools together with Material UI I get the warning that DevTools uses a <pre> tag as a descendant of a <p> tag. As Material UI is such a widely used library, would it be possible to use another tag than pre to build up the DevTools?

Here is the traceback:

react_devtools_backend.js:2430 Warning: validateDOMNesting(...): <pre> cannot appear as a descendant of <p>.
    at pre
    at p
    at td
    at tr
    at tbody
    at table
    at Styled(table)
    at PanelTable (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7169:24)
    at section
    at PanelChildren (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7302:21)
    at PanelChildren (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7302:21)
    at div
    at div
    at Panel (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7346:22)
    at div
    at div
    at Animate (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:80826:13)
    at DevToolUI (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7487:22)
    at s (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:35453:543)
    at DevTool (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7547:33)
    at FormProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:78358:150)
    at StructureForm (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:92835:23)
    at StructurePanel (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:93005:93)
    at section
    at MuiGrid-root (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73)
    at Grid (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:11129:92)
    at div
    at MuiGrid-root (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73)
    at Grid (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:11129:92)
    at div
    at http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8082:5
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73
    at Box (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8126:98)
    at TransformerRegistry (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:93619:23)
    at StructuredReportContent
    at TemplatePage
    at WithSuperJSON (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:29853:42)
    at BlitzInnerRoot (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:1355:5)
    at main
    at http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8082:5
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73
    at Box (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8126:98)
    at div
    at MuiContainer-root (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73)
    at Container (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:10531:86)
    at div
    at http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8082:5
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73
    at Box (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8126:98)
    at Layout (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:95424:20)
    at Suspense
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:76948:37)
    at InnerThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:7954:74)
    at ThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:10920:5)
    at ThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:7974:5)
    at SwitchableThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:97670:23)
    at LocalizationProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:10313:5)
    at LocalizationProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:97427:23)
    at App (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:99659:24)
    at AppWithStructuredReportTranslations (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:98405:28)
    at I18nextProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:78760:19)
    at AppWithSiteTranslations (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:98255:28)
    at Provider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:82004:20)
    at AppWithRedux (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:98117:32)
    at BlitzOuterRoot (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:1380:34)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1617536214703:146:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1617536214703:250:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1617536214703:8662:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1617536214703:9146:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1617536214703:9277:24)

Unable to resolve peer dependency with React v17.

Installing the dev tools npm install @hookform/devtools -D with the latest version of react (v17.*.*) is failing.

It is caused by little-state-machine library version 3.1.4 peerDependency which is fixed in little-state-machine version 4.*.*
(Same as react-hook-form/react-hook-form#3284)

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/@hookform/devtools/node_modules/little-state-machine
npm ERR!   little-state-machine@"^3.0.1" from @hookform/[email protected]
npm ERR!   node_modules/@hookform/devtools
npm ERR!     dev @hookform/devtools@"*" from the root project

Styles with text name overflow not correctly handled.

Hi! amazing devtools you guys have made :)

There's a small bug I'm having on Chrome 81, ubuntu.

Apparently whenever the registered input name is too large (in my case, shipping_company_name), the text overflows with an ugly default scrollbar.

Maybe something like a text ellipsis could easily solve the issue.

Keep up the good work!

Not working with "react-hook-form": "6.0.0-rc.4"

Does devtools have a working version compatible with newest react hook form?

Thanks :)

Cannot read property 'control' of null

I added this to my component exactly like the tutorial and it crashed with message:
Cannot read property 'control' of null

"react": "17.0.1"
"react-hook-form": "7.0.4"
"@hookform/devtools": "3.0.0-rc.2"

Add enable props

Hi.
I love this devtools. Thanks for all contributors!

Currently, this devtools UI are included application ifNODE_ENV is NOT production.
But, I think people who want to create an application as experimental wants to enable devtools UI in production build.
I'm one of them.
https://sandbox-redux-toolkit-create-entity-adapter.vercel.app/
(In this case, I wroteimport * as ReactHookFormDevTool from '@hookform/devtools/dist/index.cjs.development.js'; https://github.com/tyankatsu0105/sandbox-redux-toolkit-create-entity-adapter/blob/15e845c47090a03e5baf0d4ab8306ae651ea19ce/apps/client/components/create/add-one/add-one.container.tsx#L5)

So, I propose props enable: boolean to <DevTool />
Like this:

import * as ReactHookFormDevTool from "@hookform/devtools/dist/index.cjs.development.js";

export const Component = () => (
  <ReactHookFormDevTool.DevTool control={control} enable />
);
// or
export const Component = () => (
  <ReactHookFormDevTool.DevTool
    control={control}
    enable={NODE_ENV === "production"}
  />
);

DevTools show all fields as dirty as soon as a single field is dirty

Here a GIF as demo:

When manually outputting dirtyFields in code, it shows the following:

So this doesn't seem to be a bug in react-hook-form itself since its output is correct.

DevTools don't show isDirty and isTouched anymore

I've just did the upgrade to react-hook-form 6.5.1 and 2.2.0 of the dev tools.
But now isDirty and isTouched isn't shown for fields anymore. Is this change intended?
I'm currently debugging something where seeing this information is crucial.

TypeError: methods is null

Hello. the devtool is not working after using npx created-react-app. Thank you.

The error:
The image on Imgur

The dependecies are as follows.

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "7.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "devDependencies": {
    "@hookform/devtools": "^3.0.0-rc.2"
  }

code:

import React from "react";
import { useForm } from "react-hook-form";
import { DevTool } from "@hookform/devtools";

const App = () => {
  const { register, control, handleSubmit } = useForm({
    mode: "onChange",
  });

  return (
    <>
      <form onSubmit={handleSubmit(d => console.log(d))}>
        <h1>React Hook Form DevTools</h1>

        <label>Test</label>
        <input {...register("test")} />

        <input type="submit" />
      </form>
      
      <DevTool control={control} /> {/* set up the dev tool */}
    </>
  );
};

export default App;

make resizable by dragging

most of the time my path has an ellipsis and i have no idea what it is... would be great to be able to drag the dev tools out to any width I like, so I can read it