Error: The object can not be cloned

[enricodeleo]

Describe the bug In some context, while sending requests containing payload as objects I get the error The object can not be cloned.

Desktop (please complete the following information):

• OS: Ionic on iOS

Smartphone (please complete the following information):

• Device: iPhone 12
• OS: 14

Additional context As far as I can understand the JS Object is transferred to the native side of the plugin as is and then serialized there, causing issues in case the object has references to other variables.

[thomasvidas]

Can you provide a reproduction repo on Github?

[emily-curry]

Take a look at this document: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

This error is indicative of passing something over a bridge that can't be properly serialized (usually it's the renderer<->webworker bridge, but in this case it's between the renderer<->native). The most common form of this issue is trying to include dom elements in messages that leave the renderer context.

[rightmentor]

I am facing the same issue where i am trying to send file object in Form data,

DataCloneError: The object can not be cloned

[maleo]

I see the same issue here, basically my case is I am trying to capture an image, but the image is in memory only, and then we use javascript File to create a file and append it to FormData, but I see the issue DataCloneError: The object can not be cloned

[nonsenseless]

@rightmentor I'm also encountering this issue in a case where I'm sending a file object in FormData. I'll follow-up if I figure out how to address.

[jindalrj]

Facing the same issue as @maleo i.e. facing this error when trying to post image. If anybody finds a solution please update this thread.

[jindalrj]

In my case I was using FormData which is not serializable, and thus this error was being emitted. To handle it, I converted to a plain JavaScript object via below code.

const convertToSerializableObject = (data: FormData) => {
    const object = {};
    data.forEach(function(value, key){
        object[key] = value;
    });
    return object;
}

That alone did not fix the problem as this library does not support multipart/form-data. To send files over the network, I passed file references in the payload and when contentType is multipart/form-data, resolved them within the library, see code here