Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

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:

clone the react-hook-form-mui repo
go to the example folder
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
the hot reload is working but try refreshing the page

Issue Analytics

State:
Created a year ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

slaatcommented, Aug 29, 2022

awesome, thank you!!

1reaction

dohomicommented, Aug 29, 2022

@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