ipfs-shipyard / ipfs-shipyard/js-libp2p-react-native
_os.default.networkInterfaces is not a function (it is undefined)
- 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.