TypeError: cannot read property 'on' of undefined

[Marco Ippolito]

In Ubuntu 18.04.02  I'm trying to figure out how to make Peer.js working with Vue.js .

This is the vue page:

    <template>
      <div>
        <p>My Peer Id : {{ myPeerId }}</p>
        <hr>
        <p>Remote Peer Id
          <input v-model="remotePeerId">
        </p>
        <hr>
        <p button @click="connect()">Connect to my friend!</p>
      </div>
    </template>

    <script>
        import Peer from 'peerjs';

        export default {
          data: () => ({
            connection: null,
            connecting: true,
            message: '',
            messages: [],
            myPeer: null,
            myPeerId: '',
            remotePeerId: ''
          }),
          created() {
            this.myPeerId = (Math.random() * 6 + Math.random()).toString(36).replace('.', '');
            this.myPeer = new Peer({ id: 'this.myPeerId', key: 'lwjd5qra8257b9' })
            this.myPeer.on('open', (id) => {
              console.log('Connected at PeerJS server with success')
              console.log('My peer ID is: ' + id);
              this.connecting = false
            })
          },
          computed: {
          },
          methods: {
            connect() {
              if (this.remotePeerId.trim().length) {
                this.connection = this.myPeer.connect(this.remotePeerId)
                // Receive messages:
                this.connection.on('data', (data) => {
                  this.connection.on('data', data => this.messages.push(data))
                })
              }
            },
            sendMessage() {
              const newMessage = {
                id: this.myPeerId,
                message: this.message
              }
              if (this.connection) {
                this.connection.send('Hello')
              }
              this.messages.push(newMessage)
              this.message = ''
            }
          },
          filters: {
          }
        }
    </script>

Why when clicking "Connect to my friend!" it says "TypeError: cannot read property 'on' of undefined" ?

How to solve the problem?

Marco

[Brett Fraley]

Marco,

In this bit here:

 methods: {
            connect() {
              if (this.remotePeerId.trim().

length) {
                this.connection = this.myPeer.connect(this.remotePeerId)
                // Receive messages:
                this.connection.on('data', (data) => {
                  this.connection.on('data', data => this.messages.push(data))
                })
              }
            },

this.connection is assigned and evaluated immediately after on the next line where 'connection' is undefined and has no property named 'on'.

I'm guessing that this should be wrapped in an await... then clause, allowing the connection to establish before proceeding.

Your goal should be to debug why connection is undefined, and if the peer connection (this.connection) is returning any errors.

Good luck to you in getting PeerJS working with Vue.

Brett