Form fields and Cannot assign to read only property X of object '#<Object>'

[vilola]

I have a form set by Mantine useForm. Nothing special. I then set the form value to the context because I need to use it on multiple "pages" - tabs, but visually it separated forms. From code perspective it is one data object. I am setting the form without initial values as they are fetched later on, so in useEffect I then initialize the form with form.initialize(client); when I do have the client data.

But I have massive problem with Cannot assign to read only property 'name' of object '#'. Interestingly when I try to input something in an number input or boolean, it somehow "start" the form and then also text inputs for name etc. are working correctly and data is updated. Boolean (checkbox) shows the error, but on the second check/uncheck it is working normally. Weird. Number input do not returns any error. Just works and then the whole form is working.

This "edit" mode is visible after button click, but the form is initialized right away as form values are also used to display data in preview mode. The data is there and is showing correctly.

After adding the form.initialize(client) part, the base form is working on first go - go to page, click edit button, form is working. But after submit or dismiss changes and going back to edit mode then, form is not working again. Forms on the other tabs are not working never.

I was trying controlled and uncontrolled form mode, no change. I can't share the code with you as it is not allowed by my company, so my question is more like if someone more experienced have some experience with this behaviour or will have any suggestions what to try.

Full error here:

TypeError: Cannot assign to read only property 'name' of object '#<Object>'
    at setPath (set-path.mjs:12:1)
    at Object.eval [as setFieldValue] (use-form-values.mjs:38:38)
    at eval (use-form.mjs:56:1)
    at eval (use-form.mjs:106:1)
    at eval (get-input-on-change.mjs:14:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at eval (react-dom.development.js:9288:1)
    at batchedUpdates$1 (react-dom.development.js:26140:1)
    at batchedUpdates (react-dom.development.js:3991:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:1)
    at dispatchEvent (react-dom.development.js:6457:1)
    at dispatchDiscreteEvent (react-dom.development.js:6430:1)

The error itself is fired by code in setPath

const cloned = klona(values);
  if (splittedPath.length === 1) {
    cloned[splittedPath[0]] = value;
    return cloned;
  }

->cloned[splittedPath[0]] = value;

The form was working previously, but I just can't find the thing what broke it. There was few unrelated changes to the code around, but nothing what should broke it (and I tried to go one by one on/off and didn't find it..)

[rtivital]

useForm hook is designed to hold regular js values (numbers, strings, objects, arrays, etc.). It cannot process correctly values that cannot be processed as json or values that have been modified on object level with something like Object.freeze. Do not store values that cannot be cloned in useForm. Use useState for that instead.

[theShuker]

I am having the same issue.
When using controlled mode with form context, form.setFieldValue() gives me the same error.
State holding regular values, nothing special

[vilola]

I am having the same issue.

When using controlled mode with form context, form.setFieldValue() gives me the same error.

State holding regular values, nothing special

Hi, I think I solve it by using structuredClone on the object I was assigning as a default values in the form (or sth like that, but structuredClone saved me)

[theShuker]

I am having the same issue.
When using controlled mode with form context, form.setFieldValue() gives me the same error.
State holding regular values, nothing special

Hi, I think I solve it by using structuredClone on the object I was assigning as a default values in the form (or sth like that, but structuredClone saved me)

Thanks for advice!

For me the problem was occuring when i tried to pass form.values as a param directly to another hook, which handles fetching.
Wrapping form.values with structuredClone seems to fix it