Using libp2p-bootstrap in Browser

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.

Hello @twoheart

The problem here is not related to Bootstrap, but on the addresses configuration. The addresses configuration is an object and not an array: js-libp2p/CONFIGURATION.md at master · libp2p/js-libp2p · GitHub and js-libp2p/API.md at master · libp2p/js-libp2p · GitHub

Did you find documentation for it to be an array? If so, please let me know as it is outdated

Hi there, thanks for responding. I ended up finding this out after looking more at examples in the repo. The mistake came from reading an older 3rd party blog post.

What did you do to overcome the issue? i am encountering similar issue. @twoheart