Error an object could not be cloned

I am unable to pass any object or arrays to IPCRenderer.

I am getting error when passing an object or array through ipcs, I have even tried to send by converting to string using JSON.stringify but it converts it into empty object string.

I have tried passing a fileList, an array of object & even an object nothing passes. only string or handwritten objects are working.

I’ve read that it uses Structured Clone Algorithm and fileList & Array is allowed by this algorithm

ERROR:

electron/js2c/renderer_init.js:74 Uncaught Error: An object could not be cloned.
    at EventEmitter.i.send.i.send (electron/js2c/renderer_init.js:74)
    at HTMLButtonElement.compressNow (ImageHandling.js:190)

I have tried many possible solutions but nothing worked

code:

const compressNow = () => {
    ipcRenderer.send("image:compress", filess).  ///This is the error.
    // filess is a variable containing an array of selected files from an HTML input.
}

Now i have tried to send filess as JSON.stringify, i tried to send it as an object but nothing works unless i manually write a dummy object or string.

Here’s My Github Repo for this project

Files With ErrorJ:-

ImageHandling.js

const fs = window.require('fs');
const {ipcRenderer} = require("electron")
const SELECT = (target) => document.querySelector(`${target}`)
var filess = []

const imgUploadInput = SELECT("#imgUploadInput")
const warning = SELECT("#warning")

const setImgBase64 = (imgEl, file) => {

    const ReadAbleFile = fs.readFileSync(file.path).toString('base64')
    let src = "data:image/png;base64," + ReadAbleFile

    imgEl.setAttribute("src", src)
    // El.src=src

    // console.log(`FIXED IMAGE # ${imgEl} `,ReadAbleFile)

}
const renderImages = () => {
    const files = filess && Array.from(filess)
    const defaultImg = SELECT("#defaultImg")
    const addImgBtn = SELECT("#addImgBtn")
    imgUploadInput.disabled = true;

    let numOfFiles = files.length

    if (numOfFiles < 1) {
        SELECT("#compressContainer").style.visibility = "hidden"
    } else {
        SELECT("#compressContainer").style.visibility = "visible"
    }
    if (numOfFiles > 49) {
        warning.innerHTML = `<b style="font-weight:bold; color:red;">WARNING:</b><br/> 
                               <span style="padding:10px;text-align:left">
                               Your processor/computer may not be able to process ${numOfFiles} Images at once, We recommend selecting less than 50 Images at once for better performance.
                                </span>
                                `;
    }
    addImgBtn.innerHTML = `LOADING.....`
    if (defaultImg && numOfFiles > 0) 
        defaultImg.remove();
    


    setTimeout(() => {

        if (files && numOfFiles > 0) {
            let displayImages = SELECT("#displayImages")
            displayImages.innerHTML = ""
            files ?. forEach((file, i) => {
                let divEl = document.createElement("div")
                let imgEl = document.createElement("img")
                imgEl.src = file.path

                imgEl.id = `PNG_${i}_${
                    btoa(file.name)
                }`
                divEl.className = "displayedImg"

                imgEl.setAttribute("onclick", `document.getElementById('ImageView').src=this.src`)


                const a = document.createElement("a")
                a.appendChild(imgEl)

                a.setAttribute("href", `#ViewImage`)
                a.className = "perfundo__link"


                divEl.appendChild(a)

                divEl.className = "displayedImg perfundo"

                displayImages.appendChild(divEl)


                if (i == files.length - 1) {
                    warning.innerHTML = "";
                    updateNumOfImages();
                }
                imgEl.onerror = () => setImgBase64(imgEl, file) // converting to base64 only on error, this make performance better and help us avoid freezes. (before this i was converting all images to base64 wither errored or not that was making computer freez)
            })
            addImgBtn.innerHTML = "+ Add MORE"
            imgUploadInput.disabled = false
            findDuplicate()
        }

    }, 0);
}

const hasDuplicate=()=>{
    let FileNames = [... filess.map(f => f.name)]
    let duplicateFiles = filess.filter((file, i) => FileNames.indexOf(file.name) !== i)

    return {FileNames,duplicateFiles,FilesLength:duplicateFiles.length}
}
const findDuplicate = (forceAlert = false) => {
    if (filess && filess.length) {
        let {FileNames} = hasDuplicate()
        let {duplicateFiles} = hasDuplicate()
        if (duplicateFiles.length) { // alert(``)

            let countFiles = duplicateFiles.length
            let fileStr = countFiles > 1 ? "files" : "file"
            console.log("result from removeDup=> ", filess, " n dupfilename=> ", FileNames, " n dupfiles=> ", duplicateFiles)

            let shouldNotAsk = localStorage.getItem("NeverAsk")
            let msg = `You've selected ${
                countFiles > 1 ? countFiles : "a"
            } duplicate ${fileStr}`
            let duplInner = `<span style='color:red'> 
                               <b>WARNING</b>
                               <p style="margin:0px;line-height:1">  ${msg} .  <button onClick="findDuplicate(true)" type="button"  class="btn btn-danger btn-rounded  btn-sm">REMOVE DUPLICATE</button></p>
                              </span>`
            if (! shouldNotAsk || forceAlert) {
                swal("DUPLICATE FILES DETECTED", `${msg} , Would you like to un-select duplicate ${fileStr} having same name?`, {
                    icon: 'warning',
                    dangerMode: true,
                    buttons: {
                        cancel: true,
                        ...forceAlert ? {} : {
                            never: "Never Ask"
                        },
                        confirm: "Yes !"
                    }
                }).then((Yes) => {
                    if (Yes == "never") {
                        localStorage.setItem("NeverAsk", true)
                        warning.innerHTML=duplInner

                    } else if (Yes) {
                        removeDuplicates()

                    }
                })
            } else {
                warning.innerHTML=duplInner
            }
        }

    }
}


const removeDuplicates = (showAlert=true) => {
    
    let {FileNames} = hasDuplicate()
    let {duplicateFiles} = hasDuplicate()
    let duplicateFileNames = duplicateFiles.map(f => f.name)
    let uniqueFiles = filess.filter((file) => ! duplicateFileNames.includes(file.name))
    filess = [
        ... uniqueFiles,
        ... duplicateFiles
    ]

    console.log("result from removeDup=> ", filess, " n filename=> ", FileNames, " n dupfiles=> ", duplicateFiles, "n unique fil=> ", uniqueFiles)
    renderImages()
    if(showAlert){
    swal("DONE", "Removed Duplicate Files ", {icon: 'success'}).then(() =>{ 
        renderImages()
        setTimeout(() => {
             let hasDuplicateFiles = hasDuplicate().FilesLength
             if(hasDuplicate){//Re-check if any duplicate files left after the current removal process. 
                 removeDuplicates(false) //Re-run the function to remove remaining. false will make sure that this alert does not show and the loop does not continue.
             }
             renderImages()

        }, 10);
    
    })
   }
}




const updateNumOfImages = () => {
    warning.innerHTML = `
                <span style="text-align:left; color:green">
                        Selected ${
        filess.length
    } Image(s)
                 </span>
                 `;
}


const compressNow = () => {
    ipcRenderer.send("image:compress", filess)
    // alert("WOW")
}


CompressBtn.addEventListener("click", compressNow)

imgUploadInput.addEventListener("change", (e) => {
    let SelectedFiles = e.target.files

    if (SelectedFiles && SelectedFiles.length) {
        filess = [
            ... filess,
            ... SelectedFiles
        ]
        renderImages()
    }
})
// SELECT("#imgUploadInput").addEventListener("drop",(e)=>console.log("DROP=> ",e))

UPDATE:-

I REPLACED THIS:

const compressNow = () => {

        ipcRenderer.send("image:compress",filess)
    
}

INTO THIS:-

const compressNow = () => {

    filess.forEach(file => {
        ipcRenderer.send("image:compress",file.path )
    });
}

Now here i am sending the files one by one via forEach, actually its sending string «file path» so thats how its working i am still confused why do i have to do this? why can’t i send whole fileList i assume that this loop method is a bad practice because it will consume more CPU its one additional loop however it won’t be necessary if i am able to send the whole array.

When I try to sign a message with this simple function const signatue = await window.web3.eth.sign(hash, userAddress) I get an error.

In firefox I get Unhandled promise rejection DOMException: "The object could not be cloned."

The actual data I put into this function for example are: hash 0x2339863461be3f2dbbc5f995c5bf6953ee73f6437f37b0b44de4e67088bcd4c2 account_address 0x627306090abab3a6e1400e9345bc60c78a8bef57

I am using «web3»: «^1.0.0-beta.47» and Metamask 6.1.0.

In «1.0.0-beta.46» Iam getting error I have already mentioned there Cannot sign a message with web3js (invalid from address)

In beta «^1.0.0-beta.37» everything works fine.

Please help me

The same error in chrome

              if (!error) {
                resolve(response);
              }
   ...<omitted>... } could not be cloned.
    at i._write (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:114976)
    at b (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:133822)
    at chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:136934
    at i.g.write (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:136961)
    at e.exports.y (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:126211)
    at chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:37123
    at e.exports.s.emit (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:37193)
    at w (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:121050)
    at _ (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:120865)
    at e.exports.b.push (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:121676)```

I’m trying to ask the main application to find some kind of device, I have been trying to do it with ipc but couldn’t make it work either with asynchronous send and sync send. I suspect that the main is trying to reply the promise.

Renderer:

const recognizedDevices = ipcRenderer.sendSync('findDevice');
console.log(recognizedDevices);

Main:

ipcMain.on('findDevice', (event) => findDevice(event));
const findDevice = async (event) => {
  let recognizedDevices = await findConnectedDevices();
  if(recognizedDevices){
  console.log("found");
  console.log(recognizedDevices);
  return event.returnValue = recognizedDevices;
  }
//TODO: If no device found
}

Result in main:

    found
[
  HID {
    _events: [Object: null prototype] { newListener: [Function (anonymous)] },
    _eventsCount: 1,
    _maxListeners: undefined,
    _raw: HID {},
    write: [Function: bound write],
    getFeatureReport: [Function: bound getFeatureReport],
    sendFeatureReport: [Function: bound sendFeatureReport],
    setNonBlocking: [Function: bound setNonBlocking],
    readSync: [Function: bound readSync],
    readTimeout: [Function: bound readTimeout],
    getDeviceInfo: [Function: bound getDeviceInfo],
    _paused: true,
    [Symbol(kCapture)]: false
  }
]

I was hoping to receive the same log result in the renderer, but unfortunately I am getting back Error: An object could not be cloned.

If I try to reply back with recognizedDevice.length I will indeed receieve «1» in the front end, so it seem like the communication between them is good. Seems like the problem is with sending the object.

iamohd-zz opened this issue 2 years ago · comments

<Draggable
    v-model="project.columns"
    group="columns"
    item-key="id"
    @end="onColumnPositionChanged"
>
    <template #item="{element: column}">
        <KanbanColumn
             :column="column"
             :key="column.id"
         />
    </template>
</Draggable>

const onCardPositionChanged = () => {
    Inertia.put('/some-route');
};

return Inertia::render('back/projects/tasks/index', [
    'project' => [
        'id'  => $project->id,
        'name' => $project->name,
        'columns' => $project->columns()
              ->orderBy('index')
              ->get()
               ->transform(function (Column $column) {
                   return [
                       'id'    => $column->id,
                       'name'  => $column->name,
                       'index' => $column->index,
                       'cards' => [...]
                    ];
               })
         ]
    ]);

'columns' => [
    ['id'=>1], ['id'=>2]
],

'columns' => [
    ['id'=>1], ['id'=>2]
],

Uncaught (in promise) DOMException: The object could not be cloned. router.ts:397:4
    replaceState router.ts:398
    saveScrollPositions router.ts:73
    resetScrollPositions router.ts:91
    g router.ts:381
    (Async: promise callback)
    g router.ts:379
    (Async: promise callback)
    setPage router.ts:373
    handleInitialPageVisit router.ts:52
    init router.ts:41
    setup app.js:43
    callWithErrorHandling runtime-core.esm-bundler.js:155
    setupStatefulComponent runtime-core.esm-bundler.js:7161
    setupComponent runtime-core.esm-bundler.js:7117
    mountComponent runtime-core.esm-bundler.js:5115
    processComponent runtime-core.esm-bundler.js:5090
    patch runtime-core.esm-bundler.js:4684
    componentEffect runtime-core.esm-bundler.js:5227
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:5173
    mountComponent runtime-core.esm-bundler.js:5132
    processComponent runtime-core.esm-bundler.js:5090
    patch runtime-core.esm-bundler.js:4684
    render2 runtime-core.esm-bundler.js:5810
    mount runtime-core.esm-bundler.js:4085
    mount runtime-dom.esm-bundler.js:1322
    <anonymous> app.js:60
    InnerModuleEvaluation self-hosted:2384
    evaluation self-hosted:2335

 props: {
    accounts: Array,
  },

JSON.parse(JSON.stringify(this.accounts))

import { usePage } from '@inertiajs/inertia-vue3';
import { reactive } from 'vue';

const obj = reactive({ ... usePage().props.value.someObject });

// Threw above error when I updated specific fields in my form
remember: ['form'],

// Works when I remove those specific problematic and large form props
remember: [
    'form.title',
    'form.label',
    // ... other small field types
],

  someProp: {
    someInt: 3,
    someArray: [
      {
        name: "someObject1",
        id: 1,
      },
      {
        name: "someObject2",
        id:2,
      }
    ],
    someString:  "string",
  },

let idToRemove = 1;
this.someProp.someArray = this.someProp.someArray.filter( arrayItem => {
  return arrayItem.id !== idToRemove;
});

let idToRemove = 1;
let indexToRemove = this.someProp.someArray.findIndex( arrayItem => {
  return arrayItem.id == idToRemove;
});
this.someProp.someArray.splice(indexToRemove, 1);

const form = useForm({
     content: {}
 })

onMounted(() => {
    form.content = JSON.parse(JSON.stringify(props.page.content));
});

let filters = JSON.parse(JSON.stringify(this.filters));

return filters.map(() => {})

<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue','input'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <div>
    <template v-for="option in input.options">
        <input type="checkbox" v-model="value" :name="input.id" :value="{ id: option.id, value: option.value }" />
        <label>{{ option.label }}</label>
    </template>
  </div>
</template>

-    emit('update:modelValue', value)
+    emit('update:modelValue', JSON.parse(JSON.stringify(value)))

export default {
    ...
    props: {
        processes: Array,
    },
    data() {
        const processesClone = this.processes.map((item) => {
            return JSON.parse(JSON.stringify(item));
        });
        return {
            processesClone: processesClone,
        }
    },
    watch() {
        processesClone(processes) {
            this.$inertia.post( ... );
        },
    },
    ...
}

<draggable v-model="processesClone" tag="tbody">
    <template #item="{ element, index }">
        <tr>
            ...
        </tr>
    </template>
</draggable>

    state: () => {
        return {
            cart: usePage().props.value.cart as Cart,
        }
    },

    actions: {
        setQuantity(product_id: number, quantity: any) {
            // Here an update to the cart happened
            this.cart.products = this.cart.products.map(productInCart => {
                if (productInCart.product_id !== product_id) {
                    return productInCart;
                }

                return {
                    ...productInCart,
                    quantity: quantity,
                }
            })
            
            // Then this PUT request will error
            Inertia.put('/cart/set', {
                cart_id: this.cart.id,
                product_id,
                quantity,
            }, {
                preserveScroll: true,
                only: ['cart', 'errors'],
            });
        },
    },

    state: () => {
        const cart =  JSON.parse(JSON.stringify(usePage().props.value.cart))

        return {
            cart: cart as Cart,
        }
    },

java.lang.CloneNotSupportedException throws when object’s class does not implement the cloneable interface and  clone method in class Object has been called to clone an object.
Some applications that override the clone method can also throw this exception to indicate that an object could not or should not be cloned.

Cloneable is marker interface which is not having any method to implement. When implement marker interface in class it indicate to JVM how to treat with this objects.
For more info about marker interface , it’s type and how to create check below link.

Marker Interface in Java, Use and Custom Marker Interface

clone() is protected method of object class which is super class of all the classes. if need to use clone() method have to override it .

Constructors :

• CloneNotSupportedException()

Create a CloneNotSupportedException object with no detail message.

• CloneNotSupportedException(String message)

Create a CloneNotSupportedException object with  exception detail message.

Example

In below example creating clone object of Employee class from object there is no any compile time error because we have override clone method of Object Class in Employee class but it will throw CloneNotSupportedException while execution because as per

Contract : if cloneable interface is implemented then only clone method will call otherwise  JVM will throw CloneNotSupportedException.

Here we are doing Shallow cloning of object. For more info on shallow and deep cloning follow below link.

Employee Class

public class Employee {
private String firstName;
private String lastName;
private int age;
private double salary;
private Address address;

public Employee(String firstName, String lastName, int age, double salary, Address address) {
super();
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.salary = salary;
this.address = address;
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public double getSalary() {
return salary;
}
public void setSalary(double salary) {
this.salary = salary;
}
public Address getAddress() {
return address;
}
public void setAddress(Address address) {
this.address = address;
}

@Override
public String toString() {
return "Employee [firstName=" + firstName + ", lastName=" + lastName + ", age=" + age + ", salary=" + salary
+ ", address=" + address + "]";
}
@Override
protected Object clone() throws CloneNotSupportedException {
return super.clone();
}

}

Address Class

public class Address {
private String addressLine1;
private String city;
private String state;
private String contry;
private String pincode;

public Address(String addressLine1, String city, String state, String contry, String pincode) {
super();
this.addressLine1 = addressLine1;
this.city = city;
this.state = state;
this.contry = contry;
this.pincode = pincode;
}

public String getAddressLine1() {
return addressLine1;
}

public void setAddressLine1(String addressLine1) {
this.addressLine1 = addressLine1;
}

public String getCity() {
return city;
}

public void setCity(String city) {
this.city = city;
}

public String getState() {
return state;
}

public void setState(String state) {
this.state = state;
}

public String getContry() {
return contry;
}

public void setContry(String contry) {
this.contry = contry;
}

public String getPincode() {
return pincode;
}

public void setPincode(String pincode) {
this.pincode = pincode;
}

@Override
public String toString() {
return "Address [addressLine1=" + addressLine1 + ", city=" + city + ", state=" + state + ", contry=" + contry
+ ", pincode=" + pincode + "]";
}

}

Test for ClassNotSupportedException

public class CloneExample {

public static void main(String[] args) {
Address address = new Address("Next to Metro Station", "Noida", "UP", "India", "201301");
Employee employee = new Employee("Saurabh", "Gupta", 30, 50000, address);
System.out.println("Employee Object Before Clone :");
System.out.println(employee);
try {
System.out.println("Employee Object After Clone :");
Employee employeeCopy = (Employee) employee.clone();

System.out.println(employeeCopy);
} catch (CloneNotSupportedException ex) {
ex.printStackTrace();
}

}

}

Output

Employee Object Before Clone :
Employee [firstName=Saurabh, lastName=Gupta, age=30, salary=50000.0, address=Add
ress [addressLine1=Next to Metro Station, city=Noida, state=UP, contry=India, pi
ncode=201301]]
Employee Object After Clone :
java.lang.CloneNotSupportedException: Employee
at java.lang.Object.clone(Native Method)
at Employee.clone(Employee.java:55)
at CloneExample.main(CloneExample.java:11)

Solutions :

To solve this CloneNotSupportedException we have to implement cloneable interface in Employee class as below and run this program again.

public class Employee implements Cloneable<span id="mce_SELREST_start" style="overflow:hidden;line-height:0;"></span>{

}

Summary :

• Explain about CloneNotSupportedException by example and how it happen.
• Constructors of CloneNotSupportedException.
• How to fix CloneNotSupportedException.
• Cloneable Marker Interface.

References :

https://docs.oracle.com/javase/8/docs/api/java/lang/CloneNotSupportedException.html