Not recieving floodsub messages and error on gossipsub

Hello, I am trying to chat with in the browser using lib2p i tried with the example listed here. but i was not able to recive any messages. i am not sure where i am doing wrong. my code is as follows.

import {createLibp2p} from "libp2p";
import {webSockets} from "@libp2p/websockets"
import { webRTCStar } from '@libp2p/webrtc-star'
import {useEffect} from "react";
import { bootstrap } from '@libp2p/bootstrap'
import {noise} from "@chainsafe/libp2p-noise"
import {mplex} from "@libp2p/mplex"
import { multiaddr } from 'multiaddr'
import {gossipsub, GossipSub} from "@chainsafe/libp2p-gossipsub"
import { floodsub } from '@libp2p/floodsub'

import { fromString as uint8ArrayFromString } from 'uint8arrays/from-string'
import { toString as uint8ArrayToString } from 'uint8arrays/to-string'

const bootstraps = [
  '/dnsaddr/bootstrap.libp2p.io/p2p/QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN',
  '/dnsaddr/bootstrap.libp2p.io/p2p/QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb',
  '/dnsaddr/bootstrap.libp2p.io/p2p/QmZa1sAxajnQjVM8WjWXoMbmPd7NsWhfKsPkErzpm9wGkp',
  '/dnsaddr/bootstrap.libp2p.io/p2p/QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa',
  '/dnsaddr/bootstrap.libp2p.io/p2p/QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt'
]

const createNode = async ()=>{
    const wrtcStar = webRTCStar()
    const node = await createLibp2p({
      addresses: {
        listen: [
          '/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star',
          '/dns4/wrtc-star2.sjc.dwebops.pub/tcp/443/wss/p2p-webrtc-star'
        ]
      },
      transports: [
        webSockets(),
        wrtcStar.transport
      ],
      connectionEncryption: [
        noise()
      ],
      streamMuxers: [mplex()],
      peerDiscovery: [
        bootstrap({
          interval: 100,
          list: bootstraps
        })
      ],
      pubsub: floodsub( )
      // connectionManager:{
      //   autoDial:true
      // }
    })
    node.connectionManager.addEventListener('peer:connect', (evt) => {
      const connection = evt.detail
      console.log('Connection established to:', connection.remotePeer.toString())   // Emitted when a peer has been found
    })
    node.addEventListener('peer:discovery', (evt) => {
      const peer = evt.detail
      // No need to dial, autoDial is on
      // console.log('Discovered:', peer.id.toString())
    })
    await node.start()
    console.log("node started : ", node.peerId.toString())
    // print out listening addresses
    const listenAddrs = node.getMultiaddrs()
    console.log('listening on addresses:', listenAddrs.map(i=>i.toString()))

    const topic = 'chat-gossip'
    await node.pubsub.subscribe(topic)
    node.pubsub.addEventListener("message", (evt) => {
      console.log(`node1 received: ${uint8ArrayToString(evt.detail.data)} on topic ${evt.detail.topic}`)
    })
// Publish a new message each second
    setInterval(async () => {
      console.log("sending message...")
      await node.pubsub.publish(topic, uint8ArrayFromString('Bird bird bird, bird is the word!'))
    }, 5000)

  }
  useEffect(()=>{
    createNode()
  },[])

if i try changing the floodsub to gossipsub

pubsub: gossipsub( {allowPublishToZeroPeers: true, emitSelf: true  })

i am getting this error

buildRawMessage.ts:40 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Message')
    at buildRawMessage (buildRawMessage.ts:40:1)
    at GossipSub.publish (index.ts:2036:1)
    at App.js:81:1

So basically, both floodsub and gossipsub are not working for me for some reason. my package.json is attached below.

{
  "name": "browser-node",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chainsafe/libp2p-gossipsub": "^5.2.1",
    "@chainsafe/libp2p-noise": "^10.1.0",
    "@libp2p/bootstrap": "^5.0.0",
    "@libp2p/floodsub": "^5.0.0",
    "@libp2p/mdns": "^5.1.0",
    "@libp2p/mplex": "^7.0.1",
    "@libp2p/webrtc-star": "^5.0.3",
    "@libp2p/websockets": "^5.0.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "libp2p": "^0.40.0",
    "libp2p-websocket-star": "^0.10.2",
    "libp2p-websockets": "^0.16.2",
    "multiaddr": "^10.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "uint8arrays": "^4.0.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

my end goal here is to connect to rust-node and communicate with that node using the browser. Is this possible using the current libp2p? also will the gossips emitted by the rust-node be available in the browser side?

libp2p / js-libp2p

Not recieving floodsub messages and error on gossipsub #1493