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

Question

How can i fix this error with my react native code the error is "ERROR TypeError: Cannot read property 'prefix' of null, js engine: hermes" i have all the packages installed in my project but still it's giving me that error I am using the latest version of react native

The full error is: ERROR TypeError: Cannot read property 'prefix' of null, js engine: hermes LOG Running "Callapp" with {"rootTag":41} ERROR Invariant Violation: "Callapp" has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.

• A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

  // App.js
    import {
      ZegoUIKitPrebuiltCallWithInvitation,
      ZegoStartCallInvitationButton,
      ZegoInvitationType,
      ONE_ON_ONE_VIDEO_CALL_CONFIG,
      ONE_ON_ONE_VOICE_CALL_CONFIG,
      GROUP_VIDEO_CALL_CONFIG,
      GROUP_VOICE_CALL_CONFIG,
    } from '@zegocloud/zego-uikit-prebuilt-call-rn';
    import ZegoUIKitSignalingPlugin from '@zegocloud/zego-uikit-signaling-plugin-rn';
  
    import React, {useState} from 'react';
    import {View, Text, TextInput, Button, TouchableOpacity} from 'react-native';
    import {NavigationContainer, useNavigation} from '@react-navigation/native';
    import {createNativeStackNavigator} from '@react-navigation/native-stack';
  
    //
    import CallingScreen from './CallingScreen';
  
    function HomeScreen() {
      const [userId, setUserId] = useState('');
      const [invitees, setInvitees] = useState([]);
  
      const navigation = useNavigation();
  
      return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <View style={{width: '90%'}}>
            <TextInput
              style={{borderWidth: 1, borderColor: 'black', marginBottom: 20}}
              value={userId}
              onChangeText={text => {
                setUserId(text);
                setInvitees(text.split(','));
              }}
              placeholder={'Invite Your Friend Please Enter All Id'}
            />
  
            <View style={{alignItems: 'center'}}>
              <ZegoStartCallInvitationButton
                invitees={invitees} // ID of the invited user.
                isVideoCall={true}
              />
            </View>
          </View>
        </View>
      );
    }
  
    const Stack = createNativeStackNavigator();
  
    function App() {
      const userID = `${String(Math.floor(Math.random() * 10000))}`;
  
      const userName = `user_${userID}`;
  
      return (
        <ZegoUIKitPrebuiltCallWithInvitation
          appID={appid}
          appSign={
            'appkey'
          }
          userID={userID} // userID can be something like a phone number or the user id on your own user system.
          userName={userName}
          ringtoneConfig={{
            incomingCallFileName: 'zego_incoming.mp3',
            outgoingCallFileName: 'zego_outgoing.mp3',
          }}
          requireConfig={data => {
            const config =
              data.invitees.length > 1
                ? ZegoInvitationType.videoCall === data.type
                  ? GROUP_VIDEO_CALL_CONFIG
                  : GROUP_VOICE_CALL_CONFIG
                : ZegoInvitationType.videoCall === data.type
                ? ONE_ON_ONE_VIDEO_CALL_CONFIG
                : ONE_ON_ONE_VOICE_CALL_CONFIG;
            return config;
          }}
          plugins={[ZegoUIKitSignalingPlugin]} // The signaling plug-in used for call invitation must be set here.
        >
          <Text
            style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              right: 0,
              zIndex: 10,
              textAlign: 'center',
              color: 'black',
              fontWeight: 'bold',
            }}>
            UserId :- {userID}
          </Text>
          <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen
              name="CallingScreen"
              component={CallingScreen}
              options={{
                headerShown: false,
              }}
            />
          </Stack.Navigator>
        </ZegoUIKitPrebuiltCallWithInvitation>
      );
    }
  
    export default App;
  

Package.json file:

{
  "name": "Callapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/native-stack": "^6.9.13",
    "@zegocloud/zego-uikit-prebuilt-call-rn": "^4.1.3",
    "@zegocloud/zego-uikit-rn": "^2.1.1",
    "@zegocloud/zego-uikit-signaling-plugin-rn": "^1.3.8",
    "react": "18.2.0",
    "react-delegate-component": "^1.0.0",
    "react-native": "0.72.1",
    "react-native-safe-area-context": "^4.6.3",
    "react-native-screens": "^3.22.0",
    "react-native-sound": "^0.11.2",
    "zego-express-engine-reactnative": "^3.2.0",
    "zego-zim-react-native": "^2.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.7",
    "@tsconfig/react-native": "^3.0.0",
    "@types/metro-config": "^0.76.3",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.5",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

Answer 1

I encountered the same issue. I just rebuilt the application and it started working with npx expo run:android.