-
Notifications
You must be signed in to change notification settings - Fork 62
Open
Description
Hi, I followed Vision Camera official documentation and installed react-native-worklets-core to be able to use frame processors for react-native-vision-camera, however, I keep getting the following error when I try to run the app.
2026-03-17 07:20:08.409 19410-19463 unknown:ReactNative com.eyesight E Unable to download JS bundle
com.facebook.react.common.DebugServerException: The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.bundle?platform=android&dev=true&lazy=true&minify=false&app=com.eyesight&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server
Body:
2026-03-17 07:20:08.410 19410-19463 unknown:ReactNative com.eyesight E {"type":"TransformError","lineNumber":0,"name":"SyntaxError","message":"App.tsx: P:\\Mobile\\eyesight\\App.tsx: Cannot find module '@babel/plugin-proposal-optional-chaining'\nRequire stack:\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\metro-transform-worker\\src\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\metro\\src\\DeltaBundler\\Worker.flow.js\n- P:\\Mobile\\eyesight\\node_modules\\metro\\src\\DeltaBundler\\Worker.js\n- P:\\Mobile\\eyesight\\node_modules\\jest-worker\\build\\workers\\processChild.js\n- Did you mean \"@babel/plugin-transform-optional-chaining\"?\n\nMake sure that all the Babel plugins and presets you are using\nare defined as dependencies or devDependencies in your package.json\nfile. It's possible that the missing plugin is loaded by a preset\nyou are using that forgot to add the plugin to its dependencies: you\ncan workaround this problem by explicitly adding the missing package\nto your top-level package.json.\n","stack":"Error: P:\\Mobile\\eyesight\\App.tsx: Cannot find module '@babel/plugin-proposal-optional-chaining'\nRequire stack:\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\metro-transform-worker\\src\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\metro\\src\\DeltaBundler\\Worker.flow.js\n- P:\\Mobile\\eyesight\\node_modules\\metro\\src\\DeltaBundler\\Worker.js\n- P:\\Mobile\\eyesight\\node_modules\\jest-worker\\build\\workers\\processChild.js\n- Did you mean \"@babel/plugin-transform-optional-chaining\"?\n\nMake sure that all the Babel plugins and presets you are using\nare defined as dependencies or devDependencies in your package.json\nfile. It's possible that the missing plugin is loaded by a preset\nyou are using that forgot to add the plugin to its dependencies: you\ncan workaround this problem by explicitly adding the missing package\nto your top-level package.json.\n\n at Module._resolveFilename (node:internal/modules/cjs/loader:1475:15)\n at wrapResolveFilename (node:internal/modules/cjs/loader:1048:27)\n at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1093:12)\n at resolve (node:internal/modules/helpers:209:31)\n at tryRequireResolve (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js:128:11)\n at resolveStandardizedNameForRequire (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js:162:19)\n at resolveStandardizedName (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js:183:12)\n at loadPlugin (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js:56:7)\n at loadPlugin.next (<anonymous>)\n at createDescriptor (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:140:16)\n at createDescriptor.next (<anonymous>)\n at evaluateSync (P:\\Mobile\\eyesight\\node_modules\\gensync\\index.js:251:28)\n at P:\\Mobile\\eyesight\\node_modules\\gensync\\index.js:31:34\n at Array.map (<anonymous>)\n at gensync.sync (P:\\Mobile\\eyesight\\node_modules\\gensync\\index.js:31:22)\n at gensync.all (P:\\Mobile\\eyesight\\node_modules\\gensync\\index.js:210:24)\n at Generator.next (<anonymous>)\n at createDescriptors (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:102:41)\n at createDescriptors.next (<anonymous>)\n at createPluginDescriptors (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:99:17)\n at createPluginDescriptors.next (<anonymous>)\n at P:\\Mobile\\eyesight\\node_modu
2026-03-17 07:20:08.412 19410-19463 unknown:ReactNative com.eyesight E at com.facebook.react.devsupport.BundleDownloader.processBundleResult(BundleDownloader.kt:300)
at com.facebook.react.devsupport.BundleDownloader.access$processBundleResult(BundleDownloader.kt:35)
at com.facebook.react.devsupport.BundleDownloader$processMultipartResponse$completed$1.onChunkComplete(BundleDownloader.kt:205)
at com.facebook.react.devsupport.MultipartStreamReader.emitChunk(MultipartStreamReader.kt:141)
at com.facebook.react.devsupport.MultipartStreamReader.readAllParts(MultipartStreamReader.kt:99)
at com.facebook.react.devsupport.BundleDownloader.processMultipartResponse(BundleDownloader.kt:187)
at com.facebook.react.devsupport.BundleDownloader.access$processMultipartResponse(BundleDownloader.kt:35)
at com.facebook.react.devsupport.BundleDownloader$downloadBundleFromURL$1.onResponse(BundleDownloader.kt:133)
at okhttp3.internal.connection.RealCall$AsyncCall.run(RealCall.kt:519)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1156)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:651)
at java.lang.Thread.run(Thread.java:1119)
2026-03-17 07:20:08.460 19410-19410 unknown:ReactNative com.eyesight E Exception in native call
com.facebook.react.common.DebugServerException: The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.bundle?platform=android&dev=true&lazy=true&minify=false&app=com.eyesight&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server
Body:
2026-03-17 07:20:08.460 19410-19410 unknown:ReactNative com.eyesight E {"type":"TransformError","lineNumber":0,"name":"SyntaxError","message":"App.tsx: P:\\Mobile\\eyesight\\App.tsx: Cannot find module '@babel/plugin-proposal-optional-chaining'\nRequire stack:\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\metro-transform-worker\\src\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\metro\\src\\DeltaBundler\\Worker.flow.js\n- P:\\Mobile\\eyesight\\node_modules\\metro\\src\\DeltaBundler\\Worker.js\n- P:\\Mobile\\eyesight\\node_modules\\jest-worker\\build\\workers\\processChild.js\n- Did you mean \"@babel/plugin-transform-optional-chaining\"?\n\nMake sure that all the Babel plugins and presets you are using\nare defined as dependencies or devDependencies in your package.json\nfile. It's possible that the missing plugin is loaded by a preset\nyou are using that forgot to add the plugin to its dependencies: you\ncan workaround this problem by explicitly adding the missing package\nto your top-level package.json.\n","stack":"Error: P:\\Mobile\\eyesight\\App.tsx: Cannot find module '@babel/plugin-proposal-optional-chaining'\nRequire stack:\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\metro-transform-worker\\src\\index.js\n- P:\\Mobile\\eyesight\\node_modules\\metro\\src\\DeltaBundler\\Worker.flow.js\n- P:\\Mobile\\eyesight\\node_modules\\metro\\src\\DeltaBundler\\Worker.js\n- P:\\Mobile\\eyesight\\node_modules\\jest-worker\\build\\workers\\processChild.js\n- Did you mean \"@babel/plugin-transform-optional-chaining\"?\n\nMake sure that all the Babel plugins and presets you are using\nare defined as dependencies or devDependencies in your package.json\nfile. It's possible that the missing plugin is loaded by a preset\nyou are using that forgot to add the plugin to its dependencies: you\ncan workaround this problem by explicitly adding the missing package\nto your top-level package.json.\n\n at Module._resolveFilename (node:internal/modules/cjs/loader:1475:15)\n at wrapResolveFilename (node:internal/modules/cjs/loader:1048:27)\n at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1093:12)\n at resolve (node:internal/modules/helpers:209:31)\n at tryRequireResolve (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js:128:11)\n at resolveStandardizedNameForRequire (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js:162:19)\n at resolveStandardizedName (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js:183:12)\n at loadPlugin (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\files\\plugins.js:56:7)\n at loadPlugin.next (<anonymous>)\n at createDescriptor (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:140:16)\n at createDescriptor.next (<anonymous>)\n at evaluateSync (P:\\Mobile\\eyesight\\node_modules\\gensync\\index.js:251:28)\n at P:\\Mobile\\eyesight\\node_modules\\gensync\\index.js:31:34\n at Array.map (<anonymous>)\n at gensync.sync (P:\\Mobile\\eyesight\\node_modules\\gensync\\index.js:31:22)\n at gensync.all (P:\\Mobile\\eyesight\\node_modules\\gensync\\index.js:210:24)\n at Generator.next (<anonymous>)\n at createDescriptors (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:102:41)\n at createDescriptors.next (<anonymous>)\n at createPluginDescriptors (P:\\Mobile\\eyesight\\node_modules\\@babel\\core\\lib\\config\\config-descriptors.js:99:17)\n at createPluginDescriptors.next (<anonymous>)\n at P:\\Mobile\\eyesight\\node_modu
2026-03-17 07:20:08.460 19410-19410 unknown:ReactNative com.eyesight E at com.facebook.react.devsupport.BundleDownloader.processBundleResult(BundleDownloader.kt:300)
at com.facebook.react.devsupport.BundleDownloader.access$processBundleResult(BundleDownloader.kt:35)
at com.facebook.react.devsupport.BundleDownloader$processMultipartResponse$completed$1.onChunkComplete(BundleDownloader.kt:205)
at com.facebook.react.devsupport.MultipartStreamReader.emitChunk(MultipartStreamReader.kt:141)
at com.facebook.react.devsupport.MultipartStreamReader.readAllParts(MultipartStreamReader.kt:99)
at com.facebook.react.devsupport.BundleDownloader.processMultipartResponse(BundleDownloader.kt:187)
at com.facebook.react.devsupport.BundleDownloader.access$processMultipartResponse(BundleDownloader.kt:35)
at com.facebook.react.devsupport.BundleDownloader$downloadBundleFromURL$1.onResponse(BundleDownloader.kt:133)
at okhttp3.internal.connection.RealCall$AsyncCall.run(RealCall.kt:519)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1156)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:651)
at java.lang.Thread.run(Thread.java:1119)
I just tried this on a new react native project, and I noticed it appears when I use the worklet feature on a function. The code of App.tsx is the following:
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Camera, Frame, useCameraDevice, useCameraPermission, VisionCameraProxy } from 'react-native-vision-camera';
const plugin = VisionCameraProxy.initFrameProcessorPlugin('detectFaceLandmarks', {})
export function detectFaceLandmarks(frame: Frame) {
'worklet' // The error disappears when this line is commented
if (plugin == null) {
throw new Error("Failed to load Frame Processor Plugin!")
}
return plugin.call(frame)
}
function App() {
const [cameraActive, setCameraActive] = useState(false);
const device = useCameraDevice('front');
const { hasPermission, requestPermission } = useCameraPermission();
useEffect(() => {
const init = async () => {
const requestedPermission = await requestPermission();
setCameraActive(hasPermission || requestedPermission);
};
init();
}, []);
if (device == null) return <View><Text>No tiene camara</Text></View>
if (!cameraActive) return <View><Text>No tiene permisos</Text></View>
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={cameraActive}
/>
)
}
export default App;
And my dependencies are:
"dependencies": {
"@react-native/new-app-screen": "0.84.1",
"react": "19.2.3",
"react-native": "0.84.1",
"react-native-safe-area-context": "^5.5.2",
"react-native-vision-camera": "^4.7.3",
"react-native-worklets-core": "^1.6.3"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "20.1.0",
"@react-native-community/cli-platform-android": "20.1.0",
"@react-native-community/cli-platform-ios": "20.1.0",
"@react-native/babel-preset": "0.84.1",
"@react-native/eslint-config": "0.84.1",
"@react-native/metro-config": "0.84.1",
"@react-native/typescript-config": "0.84.1",
"@types/jest": "^29.5.13",
"@types/react": "^19.2.0",
"@types/react-test-renderer": "^19.1.0",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "19.2.3",
"typescript": "^5.8.3"
},
Did I configure something wrong? Any help is appreciated.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels