Unable to use @react-three/fiber custom widget with Mendix 10.18.7
0
Hi All, I am trying to create a custom 3D-configurator widget using threejs and React-three/fiber library. My code does not throw any syntax or build error, but when using the widget in mendix it does not render on the page and on inspecting I get the below runtime error in console - Cannot read properties of undefined (reading 'current') TypeError: Cannot read properties of undefined (reading 'current') at isConcurrentActEnvironment (http://localhost:8080/widgets/mendix/canvaswidget/CanvasWidget.js?638851547780584077:6409:138) at warnIfUpdatesNotWrappedWithActDEV (http://localhost:8080/widgets/mendix/canvaswidget/CanvasWidget.js?638851547780584077:6949:134) at scheduleUpdateOnFiber (http://localhost:8080/widgets/mendix/canvaswidget/CanvasWidget.js?638851547780584077:6488:64) at Object.updateContainer (http://localhost:8080/widgets/mendix/canvaswidget/CanvasWidget.js?638851547780584077:7106:324) at Object.render (http://localhost:8080/widgets/mendix/canvaswidget/CanvasWidget.js?638851547780584077:9043:19) at http://localhost:8080/widgets/mendix/canvaswidget/CanvasWidget.js?638851547780584077:9512:21 at rc (http://localhost:8080/mxclientsystem/mxui/mxui.js?638851547780584077:31:93212) at xc (http://localhost:8080/mxclientsystem/mxui/mxui.js?638851547780584077:31:100466) at wc (http://localhost:8080/mxclientsystem/mxui/mxui.js?638851547780584077:31:100312) at yc (http://localhost:8080/mxclientsystem/mxui/mxui.js?638851547780584077:31:99850) Mendix Page - Below are the versions of packages used in the code and the code used - Packages - "@react-three/fiber": "^8.13.7", "three": "^0.168.0", // also tried with v158 "react": "^18.2.0" Code - import { Canvas } from "@react-three/fiber"; import { Component, createElement } from "react"; function Box() { return ( <mesh rotation={[45, 45, 0]}> <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color="orange" /> </mesh> ); } export default class CanvasWidget extends Component { render() { return ( <div style={{ width: "100%", height: "400px", overflow:"hidden",position:"relative" }}> <Canvas camera={{ position: [0, 0, 5] }}> <ambientLight /> <pointLight position={[10, 10, 10]} /> <Box /> </Canvas> </div> ); } } Any inputs on the issue would be helpful, if anyone else has face such errors while use react-three/fiber library ?