formio / react

JSON powered forms for React.js
https://form.io
MIT License
306 stars 268 forks source link

Form.js:36 Uncaught DOMException: Failed to execute 'structuredClone' #574

Closed NexPlex closed 4 weeks ago

NexPlex commented 1 month ago

Describe the bug I downloaded this https://github.com/formio/formio

"name": "oss-portal",
"version": "0.0.1",
"main": "index.js",
"author": "brendanjbond <brendanbond@gmail.com>",
"license": "MIT",
"dependencies": {
    "@formio/js": "5.0.0-dev.5621.91bd945",
    "@formio/react": "6.0.0-dev.568.ced0fbd",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remixicon": "^4.2.0",
    "wouter": "^3.1.2"
},
"devDep

"name": "formio", "version": "4.0.0", "description": "The formio server application.", "license": "OSL-3.0", "main": "index.js", "dependencies": { "@formio/core": "2.1.0-dev.129.a4f2d55", "@formio/js": "5.0.0-dev.5673.3d062b9", "@formio/node-fetch-http-proxy": "^1.1.0", "@formio/vm": "1.0.0-dev.32.0743021", "@popperjs/core": "^2.11.8",

loaded using the docker container script.

Then I run the app http://localhost:3001/ online version is here https://form.empowerhope.ai/ When I try to save a form nothing seems to happen, I see these errors in the console.

Form.js:36 Uncaught DOMException: Failed to execute 'structuredClone' on 'Window': (...args) => onAnyEvent(handlers, ...args) could not be cloned. at onAnyEvent (webpack://oss-portal/./node_modules/@formio/react/lib/components/Form.js?:36:24) at EventEmitter.eval (webpack://oss-portal/./node_modules/@formio/react/lib/components/Form.js?:230:53) at EventEmitter.emit (webpack://oss-portal/./node_modules/eventemitter3/index.js?:182:35) at EventEmitter.emit (webpack://oss-portal/./node_modules/@formio/js/lib/cjs/EventEmitter.js?:47:19) at TextFieldComponent.emit (webpack://oss-portal/./node_modules/@formio/js/lib/cjs/Element.js?:180:25) at eval (webpack://oss-portal/./node_modules/@formio/js/lib/cjs/components/_classes/component/Component.js?:2886:22)

As a workaround I modified onAnyEvent (webpack://oss-portal/./node_modules/@formio/react/lib/components/Form.js?:36:24) like this

function safeClone(value) { if (typeof value === 'function') { return value; // Skip cloning functions } try { return structuredClone(value); } catch (e) { return value; // Fallback if cloning fails } }

const onAnyEvent = (handlers, ...args) => { const [event, ...rest] = args; // Use the safeClone function instead of structuredClone const outputArgs = rest.map(arg => safeClone(arg));

if (event.startsWith('formio.')) {
    const funcName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
    switch (funcName) {
        // (Cases remain unchanged)
        // ...
    }
}

if (handlers.otherEvents && handlers.otherEvents[event]) {
    handlers.otherEvents[event](...outputArgs);
}

};

My patch seems to be working. Not sure how to update the repo via fork for its change.

NexPlex commented 4 weeks ago

I updated to formio 4.2.2 and the new client