_os.default.networkInterfaces is not a function (it is undefined)

[burhon97]

Description

I use LibP2P on React Native CLI.

I got error when create a libp2p node. This error occurred because of tcp():

TypeError: _os.default.networkInterfaces is not a function (it is undefined), js engine: hermes

Versions

MacBook Air:

• M1, 2020
• Chip Apple M1
• macOS Sonoma 14.2.1

React Native:

• version: 0.73.2

Libp2p:

• libp2p version: 1.2.1
• @libp2p/tcp: 9.0.13

Steps to reproduce

1. Created a new React Native CLI project (TypeScript)
2. Setup metro.config.js:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const config = {
resolver: {
  unstable_enablePackageExports: true,
  extraNodeModules: {
    crypto: require.resolve('react-native-quick-crypto'),
    stream: require.resolve('stream-browserify'),
    net: require.resolve('react-native-tcp-socket'),
    os: require.resolve('os-browserify'),
    path: require.resolve('path-browserify'),
  },
},
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

3. Shimming globals:

import '@azure/core-asynciterator-polyfill';
import 'react-native-url-polyfill/auto';
import 'react-native-get-random-values';
import 'weakmap-polyfill';
import {TextEncoder, TextDecoder} from 'text-encoding';
import {EventTarget, Event} from 'event-target-shim';
import {Buffer} from '@craftzdog/react-native-buffer';
import {Crypto} from '@peculiar/webcrypto';

global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
global.EventTarget = EventTarget;
global.Event = Event;

global.AbortSignal.timeout = ms => {
 const controller = new AbortController();
 setTimeout(() => {
   controller.abort(new Error('Aborted'));
 }, ms);
};
global.AbortSignal.prototype.throwIfAborted = () => {
 if (this.aborted) {
   throw new Error('Aborted');
 }
};

global.Buffer = Buffer;
global.crypto.subtle = new Crypto().subtle;

4. Enable modern JS features:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [['@babel/plugin-transform-private-methods', {loose: true}]],
};

5. Install necessary dependencies
6. Create a libp2p node on App.tsx:

import React, {useEffect, useState} from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
import './globals.js';
import {Libp2p, createLibp2p} from 'libp2p';
import {webSockets} from '@libp2p/websockets';
import {bootstrap} from '@libp2p/bootstrap';
import {noise} from '@chainsafe/libp2p-noise';
import {yamux} from '@chainsafe/libp2p-yamux';
import {Identify, identify} from '@libp2p/identify';
import {circuitRelayTransport} from '@libp2p/circuit-relay-v2';
// import {tcp} from '@libp2p/tcp';
import * as filters from '@libp2p/websockets/filters';
import type {Multiaddr} from '@multiformats/multiaddr';
import type {PeerId} from '@libp2p/interface';
import debug from 'debug';

debug.enable('libp2p:*,*:trace');

function App(): React.JSX.Element {
  const [libp2p, setLibp2p] = useState<
    Libp2p<{
      identify: Identify;
    }>
  >();
  const [peers, setPeers] = useState<PeerId[]>([]);
  const [multiaddrs, setMultiaddrs] = useState<Multiaddr[]>([]);

  useEffect(() => {
    async function getLibp2p() {
      const node = await createLibp2p({
        transports: [
          circuitRelayTransport({
            discoverRelays: 1,
          }),
          webSockets({
            filter: filters.all,
          }),
          // tcp(),
        ],
        connectionEncryption: [noise()],
        streamMuxers: [yamux()],
        peerDiscovery: [
          bootstrap({
            list: [
              '/dnsaddr/bootstrap.libp2p.io/p2p/QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN',
              '/dnsaddr/bootstrap.libp2p.io/p2p/QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa',
              '/dnsaddr/bootstrap.libp2p.io/p2p/QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb',
              '/dnsaddr/bootstrap.libp2p.io/p2p/QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt',
              '/ip4/104.131.131.82/tcp/4001/p2p/QmaCpDMGvV2BGHeYERUEnRQAwe3N8SzbUtfsmvsqQLuvuJ',
              '/ip4/127.0.0.1/tcp/54383/ws/p2p/12D3KooWPjB7XzTv1hviVwPtx4qzr864NeFGDT6aFBDVD76fAMpK',
            ],
          }),
        ],
        services: {
          identify: identify(),
        },
      });

      setInterval(() => {
        setPeers(node.getPeers());
        setMultiaddrs(node.getMultiaddrs());
      }, 5000);

      setLibp2p(node);
    }
    getLibp2p();
  }, []);

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text style={styles.header}>JS-Libp2p running on React Native</Text>
        <Text>
          <Text style={styles.prefix}>PeerId:</Text> {libp2p?.peerId.toString()}
        </Text>
        <Text>
          <Text style={styles.prefix}>Peers:</Text> {peers?.join(', ')}
        </Text>
        <Text>
          <Text style={styles.prefix}>Multiaddrs:</Text>{' '}
          {multiaddrs?.join(', ')}
        </Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  header: {
    marginTop: 40,
    marginBottom: 20,
    fontSize: 20,
    fontWeight: 'bold',
  },
  prefix: {fontWeight: 'bold', fontSize: 18},
});

export default App;

7. Run project:

npm run ios