Uncaught ReferenceError: Peer is not defined

help
1

I have loaded in the js file for peer js and when I type Peer on my console line in my browser it shows me the object.
However when I load the page I get:
Chat.jsx:18 Uncaught ReferenceError: Peer is not defined

  export default class Chat extends React.Component{


   	constructor(){
     super();	

                 // Create a Peer instance
            window.peer = new Peer({  // the error is on this line
            key: 'thisismykey',  // get a free key at http://peerjs.com/peerserver
            debug: 3,
            config: {'iceServers': [
                    { url: 'stun:stun.l.google.com:19302' },
                    { url: 'stun:stun1.l.google.com:19302' },
                ]}
           });

}

//etc

When I type Peer into the console I get:

      Function Peer(id, options) {
      if (!(this instanceof Peer)) return new Peer(id, options);
      EventEmitter.call(this);
      // Deal with overloading
      if (id && id.constructor == Object) {
      optio… // etc

Thanks!

2

You’re trying to create an instance of Chat before the definition of the Peer class has been reached.

3

Hmm I was wondering was that it. The example I was using was from a blaze template and the code was put into the oncreated function. Where should I put this for a react component? Thanks

4

I have tried it within componentDidMount but I get the same issue

5

Sorry, I don’t know React, but putting Peer inside a function will make it callable only inside that function. If you want to be able to call it outside the function, you need to put it outside the function (or use a global variable).

6

Hi thanks for replying Peppe,

By having that code in the componentDidMount() or inside the constructor it gives the error,

BUT if I have the code in its own method: connectToPeer()

and I have a button that runs that method when the app is running it works fine and as expected.

As you said it seems to be the peer.js has not loaded by the time the componentDidMount or the constructor has run?

Is there anyway around this like some way to wait until all the files have loaded first?

7

It sounds like your aren’t using Meteor’s ES2015 module support. You might want to consider using it so you can make sure Peer is imported in your Chat component before you reference it.

Since you’re using globals though, you’ll have to make sure that the source file that contains your Peer object definition is loaded before your Chat component. For more info see the Default file load order section of the Guide.

8

Thank you,

I now have:

import { Peer } from '/imports/assets/js/peer';

and in the constructor I have my code.
I have removed the peer.js file from where it was and removed it from my index js script tags.

Now the error I am getting is:

  Chat.jsx:18 Uncaught TypeError: _peer.Peer is not a constructor

If I just put:
import Peer from ‘/imports/assets/js/peer’;

I get the error:

Chat.jsx:18Uncaught TypeError: _peer2.default is not a constructor
9

For some reason using this package worked.
https://atmospherejs.com/pedrohenriquerls/peerjs