"TypeError: Cannot read properties of null (reading 'control')" when using useWatch

[slaat]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

There is an example in the storybook page for the useWatch method on how to listen to form field changes (stories/FormContainer.stories.tsx). When I try using it in the nextjs example. I am getting an Error:

TypeError: Cannot read properties of null (reading 'control')
    at useWatch (file:///Users/chris/Work/github/other/react-hook-form-mui/example/node_modules/react-hook-form/dist/index.esm.mjs:296:31)
    at SubComponent (webpack-internal:///./src/pages/index.tsx:24:84)
    at renderWithHooks (/Users/chris/Work/github/other/react-hook-form-mui/example/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5471:16)
    at renderIndeterminateComponent (/Users/chris/Work/github/other/react-hook-form-mui/example/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5544:15)
    at renderElement (/Users/chris/Work/github/other/react-hook-form-mui/example/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5759:7)
    at renderNodeDestructive (/Users/chris/Work/github/other/react-hook-form-mui/example/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5898:11)
    at renderNode (/Users/chris/Work/github/other/react-hook-form-mui/example/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6030:12)
    at renderChildrenArray (/Users/chris/Work/github/other/react-hook-form-mui/example/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5986:7)
    at renderNodeDestructive (/Users/chris/Work/github/other/react-hook-form-mui/example/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5918:7)
    at renderNode (/Users/chris/Work/github/other/react-hook-form-mui/example/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6030:12)
error - TypeError: Cannot read properties of null (reading 'control')

This error only appears when refreshing the page. If there is a bit of a delay at the page load, the form works just fine. So my workaround for now is adding a timeout of one second at page load before rendering the form. I have no idea what causes the issue since using the watcher from react-hook-form directly is working just fine for me.

Expected behavior 🤔

No Error when refreshing the page

Steps to reproduce 🕹

Steps:

1. clone the react-hook-form-mui repo
2. go to the example folder
3. add the SubComponent from stories/FormContainer.stories.tsx to the form in src/pages/index.tsx and use it in the form. change the useWatch to the fields that are present in the form or add the extra fields as well
4. the hot reload is working but try refreshing the page

[dohomi]

Do you use the hook inside of the FormContainer as a sub-component?

[slaat]

Do you use the hook inside of the FormContainer as a sub-component?

Yes. You can check out the „how to reproduce“ to see what the code would look like

[dohomi]

I can't reproduce the issue on https://react-hook-form-material-ui.vercel.app/?path=/story/formcontainer--basic

[slaat]

that's because storybook is not next. here you go: https://codesandbox.io/s/elated-snow-4x0431?file=/pages/index.js

I am not sure if codesandbox is the ideal way of testing this but you can see the code that I mentioned in the initial ticket description, it's basically what I was talking about

[dohomi]

I use NextJS in all my projects and never experienced it. But mostly I am using strict typing approach used here: https://github.com/dohomi/react-hook-form-mui/blob/master/stories/FormContainer.stories.tsx#L88

[dohomi]

I'd love if you find a solution and open a PR, but it might be just re-exporting useWatch or other API endpoints of react-hook-form but I am not sure about it yet.

[slaat]

I am quite busy at the moment, I will take a closer look soon so we can figure this one out together

[dohomi]

@slaat I finally had the time to restructure the repo and now I have a better testing environment for both Storybook and NextJS. The new version 5.6.0 re-exports the API of react-hook-form. Now you can use the useWatch hook from react-hook-form-mui and the context issue is resolved. https://github.com/dohomi/react-hook-form-mui/blob/master/apps/nextjs/src/pages/withSub.tsx#L5

[slaat]

awesome, thank you!!