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.