🐛 TypeError: Cannot read property 'CameraDevices' of undefined

[navyag-glitch]

What's happening?

I am encountering a runtime error when running my React Native Android app (Hermes enabled). The app crashes on startup with the following error:

TypeError: Cannot read property 'getConstants' of null, js engine: hermes

Additionally, I see this warning:

Warning: TypeError: Cannot read property 'CameraDevices' of undefined

From the stack trace, the issue appears to originate when accessing camera-related functionality (likely from react-native-vision-camera):

The error suggests that a native module is not properly initialized or linked, resulting in null being returned when attempting to access getConstants.

react native :0.78.2
react-native-vision-camera: 3.9.2

Reproduceable Code

App.js:
import React, {useEffect, useRef, useState} from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
import {Camera, useCameraDevices} from 'react-native-vision-camera';

const App = () => {
  const cameraRef = useRef(null);
  const devices = useCameraDevices();
  const device = devices.back;

  const [hasPermission, setHasPermission] = useState(false);

  useEffect(() => {
    (async () => {
      const permission = await Camera.requestCameraPermission();
      setHasPermission(permission === 'authorized');
    })();
  }, []);

  const takePhoto = async () => {
    if (cameraRef.current) {
      const photo = await cameraRef.current.takePhoto({
        flash: 'off',
      });
      console.log('Photo path:', photo.path);
    }
  };

  if (!device) {
    return (
      <View style={styles.center}>
        <Text>Loading camera...!!!!!</Text>
      </View>
    );
  }

  if (!hasPermission) {
    return (
      <View style={styles.center}>
        <Text>No camera permission</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Camera
        ref={cameraRef}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        photo={true}
      />

      <TouchableOpacity style={styles.button} onPress={takePhoto}>
        <Text style={styles.text}>Capture</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
  },
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    position: 'absolute',
    bottom: 50,
    alignSelf: 'center',
    backgroundColor: 'white',
    padding: 15,
    borderRadius: 10,
  },
  text: {
    fontWeight: 'bold',
  },
});

Relevant log output

ypeError: Cannot read property 'getConstants' of null, js engine: hermes Error Component Stack:
    at App (10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.hrete_0_71_4&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:101660:39)
    at RCTView (<anonymous>)
    at View (10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.hrete_0_71_4&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:47632:43)
    at RCTView (<anonymous>)
    at View (10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.hrete_0_71_4&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:47632:43)
    at AppContainer (10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.hrete_0_71_4&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:47526:25)
    at Hrete_0_71_4(RootComponent) (10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.hrete_0_71_4&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:67228:28)
anonymous @ console.js:654
reactConsoleErrorHandler @ ExceptionsManager.js:182
overrideMethod @ backend.js:17416
anonymous @ setUpDeveloperTools.js:62
registerError @ LogBox.js:211
anonymous @ LogBox.js:79
reportException @ ExceptionsManager.js:111
handleException @ ExceptionsManager.js:171
handleError @ setUpErrorHandling.js:25
reportFatalError @ error-guard.js:49
guardedLoadModule @ require.js:179
metroRequire @ require.js:92
getAvailableCameraDevices @ Camera.tsx:332
App @ &platform=android&dev=true&lazy=true&minify=false&app=com.hrete_0_71_4&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:101662
reactStackBottomFrame @ ReactNativeRenderer-dev.js:15255
renderWithHooks @ ReactNativeRenderer-dev.js:4811
updateFunctionComponent @ ReactNativeRenderer-dev.js:7189
beginWork @ ReactNativeRenderer-dev.js:8445
runWithFiberInDEV @ ReactNativeRenderer-dev.js:566
performUnitOfWork @ ReactNativeRenderer-dev.js:12596
workLoopSync @ ReactNativeRenderer-dev.js:12422
renderRootSync @ ReactNativeRenderer-dev.js:12402
performWorkOnRoot @ ReactNativeRenderer-dev.js:11896
performSyncWorkOnRoot @ ReactNativeRenderer-dev.js:3058
flushSyncWorkAcrossRoots_impl @ ReactNativeRenderer-dev.js:2925
scheduleUpdateOnFiber @ ReactNativeRenderer-dev.js:11884
updateContainerImpl @ ReactNativeRenderer-dev.js:13959
updateContainer @ ReactNativeRenderer-dev.js:13900
anonymous @ ReactNativeRenderer-dev.js:16983
renderElement @ RendererImplementation.js:50
renderApplication @ renderApplication.js:101
anonymous @ AppRegistry.js:122
runApplication @ AppRegistry.js:212
__callFunction @ MessageQueue.js:434
anonymous @ MessageQueue.js:113
__guard @ MessageQueue.js:368
callFunctionReturnFlushedQueue @ MessageQueue.js:112
Show 36 more frames
Show less
console.js:654 Warning: TypeError: Cannot read property 'CameraDevices' of undefined

This error is located at:
    at App (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.hrete_0_71_4&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:101660:39)
    at RCTView (<anonymous>)
    at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.hrete_0_71_4&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:47632:43)
    at RCTView (<anonymous>)
    at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.hrete_0_71_4&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:47632:43)
    at AppContainer (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.hrete_0_71_4&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:47526:25)
    at Hrete_0_71_4(RootComponent) (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.hrete_0_71_4&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:67228:28), js engine: hermes
anonymous @ console.js:654
reactConsoleErrorHandler @ ExceptionsManager.js:182
overrideMethod @ backend.js:17416
anonymous @ setUpDeveloperTools.js:62
registerError @ LogBox.js:240
anonymous @ LogBox.js:79
reportException @ ExceptionsManager.js:111
handleException @ ExceptionsManager.js:171
onUncaughtError @ ErrorHandlers.js:63
logUncaughtError @ ReactNativeRenderer-dev.js:6644
runWithFiberInDEV @ ReactNativeRenderer-dev.js:566
anonymous @ ReactNativeRenderer-dev.js:6674
callCallback @ ReactNativeRenderer-dev.js:3416
commitCallbacks @ ReactNativeRenderer-dev.js:3436
runWithFiberInDEV @ ReactNativeRenderer-dev.js:566
commitLayoutEffectOnFiber @ ReactNativeRenderer-dev.js:10355
commitLayoutEffects @ ReactNativeRenderer-dev.js:11023
commitRootImpl @ ReactNativeRenderer-dev.js:12867
commitRootWhenReady @ ReactNativeRenderer-dev.js:12117
performWorkOnRoot @ ReactNativeRenderer-dev.js:12064
performSyncWorkOnRoot @ ReactNativeRenderer-dev.js:3058
flushSyncWorkAcrossRoots_impl @ ReactNativeRenderer-dev.js:2925
scheduleUpdateOnFiber @ ReactNativeRenderer-dev.js:11884
updateContainerImpl @ ReactNativeRenderer-dev.js:13959
updateContainer @ ReactNativeRenderer-dev.js:13900
anonymous @ ReactNativeRenderer-dev.js:16983
renderElement @ RendererImplementation.js:50
renderApplication @ renderApplication.js:101
anonymous @ AppRegistry.js:122
runApplication @ AppRegistry.js:212
__callFunction @ MessageQueue.js:434
anonymous @ MessageQueue.js:113
__guard @ MessageQueue.js:368
callFunctionReturnFlushedQueue @ MessageQueue.js:112
Show 34 more frames
Show less
Welcome to React Native DevTools

Camera Device

undefined

Device

Android Emulator

VisionCamera Version

3.9.2

Can you reproduce this issue in the VisionCamera Example app?

I didn't try (⚠️ your issue might get ignored & closed if you don't try this)

Additional information

• I am using Expo
• I have enabled Frame Processors (react-native-worklets-core)
• I have read the Troubleshooting Guide
• I agree to follow this project's Code of Conduct
• I searched for similar issues in this repository and found none.

[maintenance-hans]

Guten Tag, Hans here.

Looks like 'ya left out some information!
Make sure to add enough details to the following section:

• Camera Device

Note

New features, bugfixes, updates and other improvements are all handled mostly by @mrousavy in his free time.
To support @mrousavy, please consider 💖 sponsoring him on GitHub 💖.
Sponsored issues will be prioritized.