TypeError: Cannot read properties of null (reading 'control')

[BjoernRave]

I have this lib for my own projects, where I mostly export form components created with react-hook-form: https://github.com/BjoernRave/rave-ui

I am creating a next.js application on react 18 with nextjs 13, but in the old pages directory.

When I try to use a useWatch hook inside one of my pages on client side navigation everything is fine, but when trying to server side render the page (I hit refresh on that page) I get the following error:

TypeError: Cannot read properties of null (reading 'control')

I am not sure what to do about it

[leapful]

@BjoernRave

Please provide a codesandbox url to re-produce the issue.

[BjoernRave]

Here is the codesandbox: https://codesandbox.io/p/sandbox/flamboyant-cdn-wfltkf

[leapful]

@BjoernRave

Sorry for the late response.

The root cause of undefined control is because server-side rendering of Next.js by default will use stream rendering therefore it will be split into chunks, therefore in this case, your Form component which is using useWatch is processed in next chunk and does not have the context of previous Form Provider.

[BjoernRave]

and is there something I can do about? Would it maybe be possible, that the useWatch and useFormContext hooks, don't throw an error when they cant find a context while being on the server?

[minlare]

I've just come across this issue and also wondering if there is anything we can do about it?

[JRoman2018]

x2

[BjoernRave]

I solved the problem by re-exporting the complete react-hook-form lib with: export * from "react-hook-form", adjusting my tsconfig so the types would get picked up: "include": [ "src", "node_modules/react-hook-form" ] and then removing the react-hook-form lib from my main project and importing useWatch from my package instead of react-hook-form

[remyzv]

I had the same problem, and exporting React Hook Form from your library doesn’t make sense. It increases the package size and slows down bundling. I fixed this by simply adding react-hook-form to peerDependencies.

Hope this helps future users!