TypeError: Cannot assign to read only property of object '#<Object>'

[nrjshka]

Hi, guys!

Version:
react-hook-form v6.11.0

Usage:
Example:

const methods = useForm({ defaultValues })

return (
  <FormProvider {...methods}>
    <Controller name="type.background" render={({ ref, ...controllerProps }) => <Background {...controllerProps} />} />
    <Controller name="image" render={({ ref, ...controllerProps }) => <Image {...controllerProps} />} />
  </FormProvider>

Problem:
I am changing the value of "type.background". I try to change again and the following error crashes: 'TypeError: Cannot assign to read only property 'background' of object '#''

What could this be related to and how can this be solved?

[bluebill1049]

can you reproduce that in a CSB?

[nrjshka]

I can't, because I don't fully understand what exactly breaks the application. I see that it has something to do with 'unregister', since I use 'shouldUnregister: false'. The moment I turn it off, the error disappears. But I cannot turn off this setting, because I am using a component that, depending on the values of the form, is shown in different places. In other words, there is a tumblr that either allows the rendering of a component at a specific location, or not. Because of this, when switching, 'unregister' occurs.

[togradywk]

I know that this is an old discussion, but I recently encountered a similar challenge with v7 when attempting to use unregister. I eventually traced my issue to a util function being used by RHF, 'unset', which attempts to delete the key value from the default values object passed in when setting up the useForm hook. The issue arises when you are passing in an immutable object as your default values. In my case I was directly passing in an object from redux toolkit, which I believe uses immer. I was able to solve this issue by doing a shallow copy of the defaultValues object I pass into useForm. In case anyone runs into this in the future....

[bluebill1049]

Thank you for sharing the solution @togradywk would you like to create a separate comment? i will mark this as answer.

[mpjura]

I ran into this same problem passing in a react prop directly to defaultValues. I used lodash/cloneDeep as @togradywk suggested and that seemed to solve the problem. Ty sir.

[bryanprimus]

lodash/cloneDeep

@mpjura

Could you provide the code snippet or the reproduction of how you solved it using lodash/cloneDeep?

[togradywk]

I know that this is an old discussion, but I recently encountered a similar challenge with v7 when attempting to use unregister. I eventually traced my issue to a util function being used by RHF, 'unset', which attempts to delete the key value from the default values object passed in when setting up the useForm hook. The issue arises when you are passing in an immutable object as your default values. In my case I was directly passing in an object from redux toolkit, which I believe uses immer. I was able to solve this issue by doing a shallow copy of the defaultValues object I pass into useForm. In case anyone runs into this in the future....

[SimeonC]

I also found this occurs if you have a <Controller component and pass an immutable value to the onChange handler and are watching the value. So basically immutable and react-hook-form don't play nice together anywhere. 🤷‍♂️

Thanks for the comment @togradywk - it helped me from going in circles for a few more hours!

[nrjshka]

I know that this is an old discussion, but I recently encountered a similar challenge with v7 when attempting to use unregister. I eventually traced my issue to a util function being used by RHF, 'unset', which attempts to delete the key value from the default values object passed in when setting up the useForm hook. The issue arises when you are passing in an immutable object as your default values. In my case I was directly passing in an object from redux toolkit, which I believe uses immer. I was able to solve this issue by doing a shallow copy of the defaultValues object I pass into useForm. In case anyone runs into this in the future....

You right, I was too using redux-toolkit and passing store object inside defaultValues. The problem I had was due deep nesting.

I have solved this problem by just creating deepCopy from the existing store object

[arnaringig]

I was passing data from redux toolkit into defaultValues in useForm, and then watch()ing the values.

As per the following link I stringified the object and then rebuilt it.
https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy

const values: FormData = watch();
const temp = JSON.stringify(values);
const copiedValues = JSON.parse(temp) as FormData;

A copy of the values is now passed and the problem has been solved.

Hope this helps someone.

[hakobpogh]

You can also use structuredClone for cloning it.

[SebUndefined]

Using data from redux (slice, RTK Query whatever) can cause problems as the values are immutable.
What you can do is simply pass a copy of the object. With loadash, _.cloneDeep(myObject)

[nrjshka]

The problem appears because of deep nesting.

Creating deepCopy of store object helped.

[tnurzynski]

in Reducer !!! not in component

Exactly, very important point!

[eleventhaus]

Can someone explain how to do this? Not sure what creating a deepCopy in reducer means.

[tnurzynski]

@eleventhaus if you have a reducer like this:

const reducer = (state, action) => {
  return {
    ...state,
    ...action.payload
  }
}

then everything works fine if your action payload is a plan object:

{
  field1: "foo",
  field2: "bar"
}

but if you have nested objects:

{
  field1: "foo",
  properties: {
    field2: "bar",
    field3: "baz"
  }
}

then you need to:

const reducer = (state, action) => {
  return {
    ...state,
    ...action.payload,
   properties: {
     ...state.properties,
     ...action.payload.properties
   }
  }
}

(you can skip'...state.properties' line if you don't want to merge objects, just overwrite)

read more
https://medium.com/@kevinlai76/the-spread-operator-deep-and-shallow-copies-d193ac9b58bf
https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy

[eleventhaus]

Ty! I figured it out but someone else who comes along will appreciate this.

[marcandrews]

in Reducer !!! not in component

This really needs to be added to to the accepted answer ❗

[dxp227]

Variation of this scenario:

1. Call getValues()
2. Pass the returned object to redux state and assign directly
   a. eg. state.field = action.payload
3. Cause the form to validate
4. Observe error

Essentially, it's possible to accidentally freeze the internal values state object used by react-hook-form by assigning the object reference in redux state.

[hakobpogh]

Yeah. And I was debugging this for a really long time. Thanks a lot. This saved me a lot of time.

[tnurzynski]

that should be the accepted answer, it explains the nitty-gritty ;)

[ivanandresdiaz]

Thank you. I am using zustand and I am using immer. Maybe that is deep problem there, However I will formated before sending it to the global store or better use JSON.stringify

[eladonline]

I solve this by using reset method each time the component props changes reset(nexParameters)

[BorjaRafolsMartinez]

I had this issue and none of the above worked for, bear in mind I was using redux data to prepopulate the form using defaultValues.

This is how my custom hook works correctly for simple values as well as for nested objects.

const useEstimationWizardForm = <T extends FieldValues>({
  mode,
  revalidateMode,
}: useEstimationWizardFormProps = {}) => {
  const defaultValues = useAppSelector((state: RootState) => getFormState(state))
  const dispatch = useDispatch()
  const form = useForm<T>({
    mode: mode ?? 'onBlur',
    reValidateMode: revalidateMode ?? 'onBlur',
    resolver: undefined,
    context: undefined,
    criteriaMode: 'firstError',
    shouldFocusError: true,
    shouldUnregister: false,
    shouldUseNativeValidation: false,
    delayError: undefined,
  })

  const {
    watch, reset,
  } = form

  useEffect(() => {
    reset(defaultValues as unknown as DeepPartial<T>)
  }, [defaultValues, reset])

  const keys = Object.keys(form.control._fields) as Path<T>[]
  const changes = watch(keys)

  useEffect(() => {
    dispatch(setFormField(createObject(keys, changes)))
  }, [dispatch, changes, keys])

  return form
}

The ultimate change that made it work is moving the defaultValues initialization from the useForm() call to a separate effect and calling reset() with the redux values.

[tnurzynski]

This is overcomplicated and you're going to have other issues.

Not sure what your setFormField and createObject do, but if your form is a nested object, you need to create a deep copy.

Example for an object-with-an-object

https://code.tutsplus.com/the-best-way-to-deep-copy-an-object-in-javascript--cms-39655a

[BorjaRafolsMartinez]

I hapiplly accept recomendations:

setFormField is a normal rtk reducer

const formSlice = createSlice({
  name: 'estimation',
  initialState,
  reducers: {
    setFormField: (state, action: PayloadAction<SetFormField>) => {
      Object.assign(state, action.payload)
    },
    reset: () => {
      return {
        ...initialState,
      }
    },
  },
})

createObject is a simple method that constructs an object based on an array of keys and an array of values, nothing fancy.

I understand deepCloning and the limitations of the object spread operator, I also agree this seems like an overkill, but trust me, I can't spend more time on this.

I tried all attempts from this thread, I tried deepcopying using JSON.parse(JSON.stringify(whatever)), i also tried with the lodash lib.

It just wouldn't work :(

[sarrietav-dev]

Hello! I recently encountered this issue. I was using Immer to change a simple thing in my code:

let values = getValues('academicInformation');
values = produce(values, (draft) => {
  draft.forEach((item) => {
    item.endDate = item.endDate
      ? new Date(item.endDate).toISOString().slice(0, 10)
      : '';
  });
});

Little did I know that Immer freezes values by default.

There are two solutions:

• Not use Immer.
• Use setAutoFreeze(false). Autofreezing docs

[firasrg]

It's really a shitty issue! it made me rollback tons of changes

[yashsway]

@bluebill1049 I'm getting this issue but for a different reason: when you pass in an async anonymous function for defaultValues, it always throws this error. Not sure how to resolve this...

even a simple function like this will throw this error