web3 v4 not working with ReactNative/Expo

[olafkrawczyk]

Expected behavior

Web3 v4 package working with ReactNative. Previous version v1 was working fine.

Actual behavior

When trying to use web3 v4 in Expo app it throws errors like:

TypeError: Cannot convert BigInt to number, js engine: hermes or

ReferenceError: Property 'TextEncoder' doesn't exist, js engine: hermes

Steps to reproduce the behavior

1. Create new Expo application
2. Install web3 package
3. Try to use web3 function

Logs

Error is coming from line 18 in web3-utils/lib/commonjs/converters.js const expo10 = (expo) => base ** BigInt(expo);

Environment

Expo with SDK 48

[jdevcs]

I was able to create a very rough web app using: expo: 48 web3: 4.0.2 node: 18.16.0

import { StyleSheet, Text, View } from 'react-native';
import { Web3 } from 'web3';
import React from 'react';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      blockData: undefined
    }
  }

  async componentDidMount() {
    await this.getData();
  }

  async getData() {
      const web3 = new Web3("https://mainnet.infura.io/v3/IDIDID");
      let data = await web3.eth.getBlock(17663628);
      this.setState({ blockData: data.hash });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>inner  {this.state?.blockData}  and web3.js is {Web3.version}</Text>

      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[jdevcs]

@olafkrawczyk what web3.js functions / scenario you are using? can you share your code in some repo with error?

[jdevcs]

@olafkrawczyk closing this issue as there is no activity and we are not able to reproduce. Feel free to open issue if error is still there and you have more info.

[horatiubran]

I can say i reproduce this here is my package.json dependencies on first import Web3 from 'web3'; it fails with the same error as his: TypeError: Cannot convert BigInt to number, js engine: hermes

"dependencies": {
    "@apollo/client": "3.7.17",
    "@metamask/sdk": "0.4.2",
    "@react-native-async-storage/async-storage": "1.19.0",
    "@react-native-clipboard/clipboard": "^1.11.2",
    "@react-native-firebase/analytics": "18.1.0",
    "@react-native-firebase/app": "18.1.0",
    "@react-native-firebase/crashlytics": "18.1.0",
    "@react-navigation/bottom-tabs": "6.5.8",
    "@react-navigation/drawer": "6.6.3",
    "@react-navigation/native": "6.0.13",
    "@react-navigation/native-stack": "6.9.13",
    "@reduxjs/toolkit": "1.9.5",
    "@shopify/react-native-skia": "0.1.157",
    "axios": "1.4.0",
    "crypto": "1.0.1",
    "events": "3.3.0",
    "formik": "^2.4.3",
    "graphql": "16.7.1",
    "graphql-tag": "2.12.6",
    "jwt-decode": "3.1.2",
    "lodash": "4.17.21",
    "moment": "2.29.4",
    "process": "0.11.10",
    "react": "18.2.0",
    "react-native": "0.70.8",
    "react-native-app-auth": "6.4.3",
    "react-native-background-timer": "2.4.1",
    "react-native-circular-progress": "1.3.9",
    "react-native-crypto": "2.2.0",
    "react-native-gesture-handler": "2.9.0",
    "react-native-get-random-values": "1.9.0",
    "react-native-graph": "1.0.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "2.7.3",
    "react-native-place-picker": "2.5.1",
    "react-native-radial-gradient": "1.1.3",
    "react-native-randombytes": "3.6.1",
    "react-native-reanimated": "2.17.0",
    "react-native-safe-area-context": "4.6.4",
    "react-native-screens": "3.22.1",
    "react-native-splash-screen": "3.3.0",
    "react-native-svg": "13.6.0",
    "react-native-svg-transformer": "1.0.0",
    "react-native-switch": "1.5.1",
    "react-native-zeroconf": "0.13.8",
    "react-redux": "^8.1.2",
    "readable-stream": "4.4.2",
    "redux-observable": "2.0.0",
    "rn-vertical-slider": "3.1.1",
    "rxjs": "7.8.1",
    "stream": "0.0.2",
    "stream-browserify": "3.0.0",
    "uuid": "9.0.0",
    "web3": "^4.1.1",
    "yup": "1.2.0"
  },

You should def reopen this ticket... RIght now developing react-native features with web3 is imposible.

[devlord123]

The FK, i have been trying to fix this issue, my code runs well with no error from my local environment, but i kept getting this BigInt errors after deployment, thereby crashing the whole app

Uncaught TypeError: Cannot convert a BigInt value to a number at Math.pow () at lo (converters.ts:40:29) at converters.ts:47:8 at index.js:17:1 at index.js:17:1

[jdevcs]

Thanks It seems while local building this error is not occurring but occurs during deployment in prod ? We will investigate it. @Halfboyfriend could you create a simple repo with above error reproducible. ?

[AhmadMehdawii]

@jdevcs I also have the same issue. In development, no problems, in production, I get the same error.

There seems to be a problem in the converters.ts file from web3 when using it in the the react components. Any workarounds or suggestions?

[the-unknown]

Expo 49 Web3 4.2.0

I get the following error:

 ERROR  ReferenceError: Property 'EventTarget' doesn't exist, 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

[Yogeshwar267]

ReferenceError: Property 'EventTarget' doesn't exist, js engine: hermes ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

[SherifSamirr]

For the following error: ReferenceError: Property 'EventTarget' doesn't exist, js engine: hermes

You will have to downgrade web3 from version 4.2.+ to version 4.1.2

[Rag0n]

To solve ReferenceError: Property 'EventTarget' doesn't exist, js engine: hermes just add EventTarget to the global. RN already uses this package, so you don't need to install it.

import { EventTarget } from 'event-target-shim'
global.EventTarget = EventTarget

I use latest web3 4.4.0 with bare expo 49 & RN 0.72.9

[jdevcs]

@mconnelly8

[luu-alex]

Did some investigation and this issue is because we use EventTarget in the codebase for browsers and reactnative does not support this natively.. A solution we can use is suggested by marin eventemitter3. will take a look into implementing this and see the bundlesize afterwards

[Muhammad-Altabba]

Hi @luu-alex , I think it will be helpful to check https://stackoverflow.com/questions/36774540/eventemitter-and-subscriber-es6-syntax-with-react-native as react native starting from version 0.60.0+, to has its EventEmitter available.

[luu-alex]

@Muhammad-Altabba Hi there, The issue is a property called EventTarget that is included in the nodejs version of eventemitter, and is not included in react-natives eventemitter. Looking at this comment they still need to include it but its been an issue since last year

[jdevcs]

@olafkrawczyk @horatiubran @the-unknown @Yogeshwar267 https://github.com/web3/web3.js/pull/6823 PR is merged having a fix by Alex, so could you check latest canary release (npm i web3@dev it will be released shortly after above PR ) and let us know if you are still facing issue?