React Native App for camera access

0
I am trying to create a javascript action to capture a video from the camera and draw bounding boxes for my app . But I am getting below error everytime when I test it in make it native app . Can someone tell me where is the issue?     {    "type": "TransformError",    "lineNumber": 0,    "errors": [        {            "description": "..\\..\\javascriptsource\\nativemobile\\actions\\node_modules\\react-native\\src\\private\\webapis\\performance\\PerformanceObserver.js: C:\\Users\\z00507mk\\Mendix\\Vision camera-main\\javascriptsource\\nativemobile\\actions\\node_modules\\react-native\\src\\private\\webapis\\performance\\PerformanceObserver.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.\n  285 |   }\n  286 |\n> 287 |   #validateObserveOptions(options: PerformanceObserverInit): void {\n      |   ^\n  288 |     const {type, entryTypes, durationThreshold} = options;\n  289 |\n  290 |     if (!type && !entryTypes) {",            "lineNumber": 0        }    ],    "name": "SyntaxError",    "message": "..\\..\\javascriptsource\\nativemobile\\actions\\node_modules\\react-native\\src\\private\\webapis\\performance\\PerformanceObserver.js: C:\\Users\\z00507mk\\Mendix\\Vision camera-main\\javascriptsource\\nativemobile\\actions\\node_modules\\react-native\\src\\private\\webapis\\performance\\PerformanceObserver.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.\n  285 |   }\n  286 |\n> 287 |   #validateObserveOptions(options: PerformanceObserverInit): void {\n      |   ^\n  288 |     const {type, entryTypes, durationThreshold} = options;\n  289 |\n  290 |     if (!type && !entryTypes) {",    "stack": "SyntaxError: C:\\Users\\z00507mk\\Mendix\\Vision camera-main\\javascriptsource\\nativemobile\\actions\\node_modules\\react-native\\src\\private\\webapis\\performance\\PerformanceObserver.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.\n  285 |   }\n  286 |\n> 287 |   #validateObserveOptions(options: PerformanceObserverInit): void {\n      |   ^\n  288 |     const {type, entryTypes, durationThreshold} = options;\n  289 |\n  290 |     if (!type && !entryTypes) {\n    at File.buildCodeFrameError (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\core\\lib\\transformation\\file\\file.js:202:12)\n    at NodePath.buildCodeFrameError (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\path\\index.js:116:21)\n    at shouldTransform (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\helper-create-class-features-plugin\\lib\\features.js:130:29)\n    at PluginPass.Class (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\helper-create-class-features-plugin\\lib\\index.js:114:44)\n    at newFn (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\visitors.js:172:14)\n    at NodePath._call (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\path\\context.js:49:20)\n    at NodePath.call (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\path\\context.js:39:18)\n    at NodePath.visit (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\path\\context.js:85:31)\n    at TraversalContext.visitQueue (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\context.js:89:16)\n    at TraversalContext.visitQueue (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\context.js:94:21)\n    at TraversalContext.visitMultiple (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\context.js:61:17)\n    at TraversalContext.visit (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\context.js:110:19)\n    at traverseNode (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\traverse-node.js:22:17)\n    at NodePath.visit (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\path\\context.js:91:52)\n    at TraversalContext.visitQueue (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\context.js:89:16)\n    at TraversalContext.visitSingle (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\context.js:65:19)\n    at TraversalContext.visit (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\context.js:112:19)\n    at traverseNode (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\traverse-node.js:22:17)\n    at traverse (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\traverse\\lib\\index.js:53:34)\n    at transformFile (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\core\\lib\\transformation\\index.js:82:31)\n    at transformFile.next (<anonymous>)\n    at run (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\core\\lib\\transformation\\index.js:24:12)\n    at run.next (<anonymous>)\n    at C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\core\\lib\\transform-ast.js:23:33\n    at Generator.next (<anonymous>)\n    at evaluateSync (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\gensync\\index.js:251:28)\n    at sync (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\gensync\\index.js:89:14)\n    at stopHiding - secret - don't use this - v1 (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\core\\lib\\errors\\rewrite-stack-trace.js:47:12)\n    at transformFromAstSync (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@babel\\core\\lib\\transform-ast.js:43:83)\n    at Object.transform (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\@react-native\\metro-babel-transformer\\src\\index.js:216:7)\n    at transformJSWithBabel (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\metro-transform-worker\\src\\index.js:287:45)\n    at Object.transform (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\metro-transform-worker\\src\\index.js:412:18)\n    at transformFile (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\metro\\src\\DeltaBundler\\Worker.flow.js:54:36)\n    at Object.transform (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\metro\\src\\DeltaBundler\\Worker.flow.js:30:10)\n    at execFunction (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\metro\\node_modules\\jest-worker\\build\\workers\\processChild.js:149:17)\n    at execHelper (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\metro\\node_modules\\jest-worker\\build\\workers\\processChild.js:137:5)\n    at execMethod (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\metro\\node_modules\\jest-worker\\build\\workers\\processChild.js:140:5)\n    at process.messageListener (C:\\Program Files\\Mendix\\10.14.0.44044\\modeler\\tools\\node\\node_modules\\metro\\node_modules\\jest-worker\\build\\workers\\processChild.js:44:7)\n    at process.emit (node:events:513:28)\n    at emit (node:internal/child_process:946:14)"} // This file was generated by Mendix Studio Pro. // // WARNING: Only the following code will be retained when actions are regenerated: // - the import list // - the code between BEGIN USER CODE and END USER CODE // - the code between BEGIN EXTRA CODE and END EXTRA CODE // Other code you write will be lost the next time you deploy the project. import "mx-global"; import { Big } from "big.js"; import { StyleSheet, View } from 'react-native'; import React from 'react'; import { Camera, useCameraDevices } from 'react-native-vision-camera';   // BEGIN EXTRA CODE // END EXTRA CODE   /** * @returns {Promise.<void>} */ export async function CameraFeedAction() { // BEGIN USER CODE // Predefined camera dimensions const cameraDimensions = { width: 1080, // Example width in pixels height: 1920, // Example height in pixels };   // Predefined bounding box dimensions const boxDimensions = { x: 100, // Distance from left side of the screen in pixels y: 200, // Distance from top of the screen in pixels width: 300, // Width of the bounding box in pixels height: 400, // Height of the bounding box in pixels };   // Destructure the bounding box dimensions const { x, y, width, height } = boxDimensions;   // Define the Camera component const CameraComponent = () => { const devices = useCameraDevices(); const device = devices.back; // Using the back camera   if (device == null) return null;   return ( <View style={{ flex: 1 }}> <Camera style={{ flex: 1, width: cameraDimensions.width, height: cameraDimensions.height }} device={device} isActive={true} /> <View style={[ styles.boundingBox, { left: x, top: y, width: width, height: height, }, ]} /> </View> ); };   // Styles for the bounding box const styles = StyleSheet.create({ boundingBox: { position: 'absolute', borderColor: 'red', borderWidth: 2, backgroundColor: 'transparent', }, });   // Open the camera with bounding boxes // You can integrate this into the main React Native app component return <CameraComponent />; // END USER CODE }  
asked
0 answers