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"
  }
}

king · Accepted Answer · 2023-09-13 15:25:55Z

3

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

answered Sep 13, 2023 at 15:25

king

911 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Haris Baig · Accepted Answer · 2025-02-10 19:54:10Z

In my case this issue was coming from the zego-callkit-react-native library. On iOS, it threw a warning, but on Android, the app crashed abruptly. Please check your simulator for the error file where its crashing, for me it was callKit.js inside nodemodules/zego-callkit-react-native/lib/CallKit.jsa

Root Cause 🧐

The problem was in the following line:

const Prefix = ZegoCallKitNativeModule.prefix;

When using Hermes, ZegoCallKitNativeModule was sometimes null, causing an error when trying to access prefix.

Solution ✅

I fixed it by modifying this line to:

import { Platform } from 'react-native';
const Prefix = Platform.OS == 'ios' ? ZegoCallKitNativeModule.prefix : '';

This ensures that on Android, the app does not crash due to a null reference. 🛠️

Apply Patch for These Fixes 🩹

I used the patch-package tool. Here’s how I applied and committed these patches:

Step 1: Install patch-package 📦

yarn add patch-package postinstall-postinstall

Step 2: Make the Changes and Save the Patch 📝

npx patch-package zego-callkit-react-native

Step 3: Ensure Patch is Applied Automatically 🔄

Add this script to package.json:

"scripts": {
  "postinstall": "patch-package"
}

Look for your file inside your package and do the same steps.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related