Skip to content

Unable to download JS bundle #268

@Juanxpeke

Description

@Juanxpeke

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions