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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions