react-native-webrtc: expo TypeError: Cannot read property 'senderGetCapabilities' of null, js engine: hermes

When I Import This statements

import {  RTCPeerConnection } from 'react-native-webrtc';

The error Come in my expo Go(In android mobile)

 ERROR  TypeError: Cannot read property 'senderGetCapabilities' of null, js engine: hermes
 ERROR  Invariant Violation: "main" 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

But If I not Import react-native-webrtc then it run smoothly

I need to create functionality which uses webrtc

package.json:

{
  "name": "billd-live-react-native",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@config-plugins/react-native-webrtc": "^7.0.0",
    "@react-navigation/bottom-tabs": "^6.5.10",
    "@react-navigation/native": "^6.1.9",
    "@rneui/base": "4.0.0-rc.8",
    "@rneui/themed": "4.0.0-rc.8",
    "axios": "^1.5.1",
    "expo": "~49.0.15",
    "expo-av": "^13.4.1",
    "expo-camera": "^13.4.4",
    "expo-dev-client": "~2.4.11",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-reanimated": "^3.5.4",
    "react-native-reanimated-carousel": "^3.5.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.1",
    "react-native-webrtc": "111.0.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "typescript": "^5.1.3"
  },
  "private": true
}

Platform Information

React Native Version : 0.72
WebRTC Module Version：111.0.6
Platform OS + Version ：Expo

About this issue

Original URL
State: open
Created 8 months ago
Comments: 16 (8 by maintainers)

Most upvoted comments

As an update here, we found that we has some bable preset configurations that was flattening our modules out as an optimization, and due to that the event-target-shim that was being used across our project was the version 5.0.0 of this, rather than 6.0.2, so everywhere we looked we kept running into issues. basically Event was a function in 5.0.0, and a defined abstract class in 6.0.2, so when the extends was used, it broke, any way you looked at it, anywhere along the import tree, if you imported any part of react-native-webrtc it would break first in events, and then when the events wend to dispatch it would break on the dispatch, etc. Good game a whack a mole till we figued out is was the wrong code trying tu be ran all thogether.

Maybe this will help were others may have done the same, and might face the same issue. It was a good head scratcher. both libraries for the time being need to coexist in the project due to react native being pinned to the older version.

i’m all for updating away from deprecated methods and adding better typing, and will see where we can contribute on that font going forward. Thank you guys for looking into this issue, and digging and all the effort that goes into maintaining this piece of code.

robertbarclay on Nov 3, 2023

i’m seeing if there are adjustments that can/need to be made with webpack and our bunlding proccess, becuase it would be a serious issue of flattening out two differing versions of a library with breaking changes.

I’m attempting to create a superclass of the Events, that then could do some inspection to determine if there is an issue with EVENT subclassing, and fix accordingly. The events class could then subclass that, and maybe that might resolve the issue. Will see where I get today on it.

robertbarclay on Nov 2, 2023

I’ll have a bash at this and get a pr up soon 👍🏻 Feel kinda obliged as some stuff fell between the cracks on my watch 😅

Alrighty, pr is up and ready for testing 😸

8BallBomBom on Oct 31, 2023

Oh, I see, I thought it wasn’t the default yet.

I suppose trying out the setEventAttributeValue is a decent way forward without much churn, would you like to give it a try? I won’t have cycles to do that in the upcoming weeks. I want to finish M118 support first.

saghul on Oct 31, 2023

Will see what we can do. We have some tight cycles as well.

robertbarclay on Oct 31, 2023

We have several dependencies that pull event-target-shim ^5.0.1 and this library which is pulling 6.0.2, where there are breaking changes between the two versions, seems like there might be an issue.

6.0.2 was released a long time ago, what is the reason not to update?

defineEventAttribute has been marked deprecated, yet it was added for each of the EventTarget’s Event Map items in the 111.0.6 release. its recommended to move to setEventAttributeValue function in that library on the documentation for that method.

That was deprecated in v6, I suspect you don’t see deprecation warnings since you might be on v5.

TypeError: Cannot call a class as a function, js engine: hermes TypeError: Cannot read property ‘render’ of undefined, js engine: hermes TypeError: Cannot call a class as a function, js engine: hermes TypeError: Cannot read property ‘prototype’ of undefined, js engine: hermes

All this sounds like Hermes not supporting some JS feature we use. Accessing the class prototype maybe?

If there is a simple fix I’ll take it though. I explicitly avoided setEventAttributeValue because it would be very verbose, we’d need 2 functions for each event, versus 1 line.

saghul on Oct 31, 2023