ipfs-shipyard / js-libp2p-react-native

A demo app running js-libp2p in a React Native app
7 stars 3 forks source link

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

Open burhon97 opened 4 months ago

burhon97 commented 4 months ago

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:

React Native:

Libp2p:

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: 
 ```js
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;
  1. Enable modern JS features:

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

  3. 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 (

JS-Libp2p running on React Native PeerId: {libp2p?.peerId.toString()} Peers: {peers?.join(', ')} Multiaddrs:{' '} {multiaddrs?.join(', ')}

); }

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: 
```bash
npm run ios