I’m new to libp2p and I’m trying to run a node in the browser, but I’m running into an issue with libp2p-bootstrap during node startup. When using libp2p-bootstrap, I receive this error in the console logs:
index.js?3591:537 Uncaught (in promise) TypeError: announceFilter is not a function
at Libp2p.get multiaddrs [as multiaddrs] (index.js?3591:537)
at IdentifyService._handleIdentify (index.js?713e:259)
I’m trying to use libp2p with Vue. Here’s my plugin code:
import filters from 'libp2p-websockets/src/filters';
const Libp2p = require('libp2p');
const WebSockets = require('libp2p-websockets');
const WS = require('libp2p-websockets');
const { NOISE } = require('libp2p-noise');
const MPLEX = require('libp2p-mplex');
const Bootstrap = require('libp2p-bootstrap');
// Known peers addresses
const bootstrapMultiaddrs = [
'/dnsaddr/bootstrap.libp2p.io/p2p/QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb',
'/dnsaddr/bootstrap.libp2p.io/p2p/QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN'
];
export default {
install: (app, options) => {
app.config.globalProperties.$libp2p = async () => {
const transportKey = WebSockets.prototype[Symbol.toStringTag];
return Libp2p.create({
addresses: [
'/ip4/127.0.0.1/tcp/0/ws',
],
modules: {
transport: [WS],
connEncryption: [NOISE],
streamMuxer: [MPLEX],
peerDiscovery: [Bootstrap],
},
config: {
transport: {
[transportKey]: {
filter: filters.dnsWsOrWss,
},
},
peerDiscovery: {
autoDial: true, // Auto connect to discovered peers (limited by ConnectionManager minConnections)
// The `tag` property will be searched when creating the instance of your Peer Discovery service.
// The associated object, will be passed to the service when it is instantiated.
[Bootstrap.tag]: {
enabled: true,
list: bootstrapMultiaddrs // provide array of multiaddrs
},
},
},
});
};
app.provide('libp2p', options);
},
};
And App.vue:
<template>
<Header />
<div class="container">
</div>
</template>
<script>
import Header from '@/components/Header';
export default {
components: {
Header
},
data() {
return {
node: Object,
};
},
async created() {
this.node = await this.$libp2p();
await this.node.start();
},
};
</script>
I’m wondering where I’m going wrong, do you have to specify a specific announceFilter in the addresses config when running in browser? Any help or advice would be appreciated.