`structuredClone` api will produce an error if argument is reactive object

[ishowman]

Vue version

all

Link to minimal reproduction

https://play.vuejs.org/#eNqtUstO3DAU/ZVbbzIjpY4GdtOA1FKktou2ait1gZGIkjvB4NiWHyEoyr9z42EGECNW7OzzsM99jOyztbyPyNas9LWTNoDHEO2p0LKzxgUYwWFVB9ljTqcNTLBxpoOMTJnQQtdG+wCdb+Fk5hfZN1TKwH/jVPMhW+4EUm/M6lEyCg0QZIdr+FoF5NrcLZb5DFbOVfdruFjlMM6ONSQt6GoWZ8Mw0J8A03Qp9PTi7aP09jboO39gFHJl2sVVg2jnSq9y8MHFOkSHzZkyGheE8r5SEZfLT0IXxWtfasABZ8KfeeGw9eiAdeScJ25KzrLYTpBmR5eAnVVUPN0AyuvV6TimKU1TWdAtoVLbGKD/2JkG1YlgxAtGVFns3SxnwVOkjWz5jTeaFiV1TLDadFYqdL9skBRZsF0viatoBe5+JIwyY2p98lxjfXsAv/HDjAn226FH16Ngey5UrsWwpc///sSBznuSkkdF6jfIP0jtjHPGrexL1A3FfqZLab+ndZe6/efPh4Da74qag6adSHrBaPHP3ij9Ke4xP04+2iQ2PQBkQyWE

Steps to reproduce

• open the link https://play.vuejs.org/#eNqtUstO3DAU/ZVbbzIjpY4GdtOA1FKktou2ait1gZGIkjvB4NiWHyEoyr9z42EGECNW7OzzsM99jOyztbyPyNas9LWTNoDHEO2p0LKzxgUYwWFVB9ljTqcNTLBxpoOMTJnQQtdG+wCdb+Fk5hfZN1TKwH/jVPMhW+4EUm/M6lEyCg0QZIdr+FoF5NrcLZb5DFbOVfdruFjlMM6ONSQt6GoWZ8Mw0J8A03Qp9PTi7aP09jboO39gFHJl2sVVg2jnSq9y8MHFOkSHzZkyGheE8r5SEZfLT0IXxWtfasABZ8KfeeGw9eiAdeScJ25KzrLYTpBmR5eAnVVUPN0AyuvV6TimKU1TWdAtoVLbGKD/2JkG1YlgxAtGVFns3SxnwVOkjWz5jTeaFiV1TLDadFYqdL9skBRZsF0viatoBe5+JIwyY2p98lxjfXsAv/HDjAn226FH16Ngey5UrsWwpc///sSBznuSkkdF6jfIP0jtjHPGrexL1A3FfqZLab+ndZe6/efPh4Da74qag6adSHrBaPHP3ij9Ke4xP04+2iQ2PQBkQyWE
• check the console of devtool

What is expected?

support data structure like Object in reactive variable.

What is actually happening?

Only basic data structure like string, number in reactive variable is supported by structuredClone api.
Here are the example codes with errors:

const info1 = ref({
  time: Date.now(),
  array: [1, {info: {
   name: 'xxx'
  }}]
})
const info2 = reactive({
  time: Date.now(),
  array: [1, {info: {
   name: 'xxx'
  }}]
})

console.log(`deep info1`, structuredClone(info1.value));
 console.log(`deep info2`, structuredClone(info2));

System Info

No response

Any additional comments?

No response

[edison1105]

structuredClone does not support Proxy. see https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#supported_types

use structuredClone(toRaw(xxx)) instead.

[LinusBorg]

Closing as there's nothing to do on our side, really. Edison's recommendation is simple enough. We could ammend the docs though, the docs team over in vuejs/docs would certainly apprechiate this input.