ipfs-shipyard / ipfs-shipyard/js-libp2p-react-native

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

Open
#3 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
11
Forks
5
PR merge metrics
No merged PRs in 30d

Description

# Description
I use [LibP2P](https://github.com/libp2p/js-libp2p) on [React Native CLI](https://reactnative.dev/docs/environment-setup).

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:
```ts
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;
```

4. Enable modern JS features:
```js
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`:
```ts
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([]);
const [multiaddrs, setMultiaddrs] = useState([]);

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
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.