Unable to download JS bundle

Start with App.tsx and the project's package.json, then inspect the Babel and Metro setup referenced by the error. Reproduce the Android development bundle failure and verify completion by getting the bundle to build without the missing-plugin TransformError.

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.