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

[emericspiroux]

Hello,

I don't understand why control props of Controller component is optional when we got TypeError: Cannot read properties of null (reading 'control') if we give undefined 🤔 .

It can be nice to create molecule where we can give control or not depending if we need to be embed into react-form-hook...

Error are not thrown if I do something like that:

{hookForm?.control ? (
        <Controller
          name={name}
          rules={hookForm?.options}
          control={hookForm?.control}
          render={({ field }) => (
            <ArrowedInputNumber
              name={name}
              id={name}
              min={hookForm?.options?.min as number}
              max={hookForm?.options?.min as number}
              step={step}
              decimalScale={decimalScale}
              onChange={(event) => field.onChange(Number(event.target.value))}
              onBlur={field.onBlur}
              placeholder={placeholder}
              defaultValue={defaultValue}
            />
          )}
        />
      ) : (
        <ArrowedInputNumber
          name={name}
          id={name}
          min={min}
          max={max}
          step={step}
          decimalScale={decimalScale}
          onChange={onChange}
          onBlur={onBlur}
          placeholder={placeholder}
          defaultValue={defaultValue}
        />
      )}

[bluebill1049]

can you share a codesandbox?

[emericspiroux]

You can find the code sandbox at this link : https://codesandbox.io/s/thirsty-elion-gtg4gn?file=/src/App.js

[JamesWong1999]

control prop is required, and hence you are getting this error above.

[Moshyfawn]

The control is optional, so that having FormProvider up the React tree, the Controller (or any other control dependent hook) can pull the control value from the form's Context if non provided via the prop.

[bvandercar-vt]

In my case, I was getting this error even though it was wrapped in a FormProvider. I am using Vite, and fixed it by adding this to my Vite config:

     optimizeDeps: {
          exclude: ['react-hook-form'],
        }

[bstro]

@bvandercar-vt fascinating! I have same issue and solution as you.

I'm on the latest version of react-hook-form. With the following code:

<Controller
  control={form.control}
  name={name}
  render={({field: {name,onBlur,onChange,ref,value}}) => {
    return <Input name={name} onBlur={onBlur} onChange={onChange} ref={ref} value={value} maxLength={36} />
  }}
/>

all the members of the field parameter object in Controller's render prop are undefined unless I add optimizeDeps: ['react-hook-form'] to my vite.config.js file.

[sadik-malik]

Your solution of adding optimizeDeps: { exclude: ['react-hook-form'] } is not working for me. The code is running fine in the browser but while testing the component using vitest I am receiving this TypeError: Cannot read properties of null (reading 'control').

code: https://codesandbox.io/p/sandbox/vitest-react-hook-form-24ckqc

[sadik-malik]

Found the solution at last. It doesn't matter whether I add optimizeDeps: { exclude: ['react-hook-form'] } in vite.config.js or not.

Changing the import for useFormContext from 'react-hook-form' to 'react-hook-form-mui' fixes the issue when FormContainer is used from react-hook-form-mui