CODEWITHSUNDEEP
reactjswebrtcsimple-peer
GoghDali
GoghDali

Reputation: 21

Simple Peer on data stream throws process not defined error

I am trying to open a data channel using simple peer. I send the signal using Firebase and am able to get the on connect function to fire.

const [thisPeer, setThisPeer] = useState();
const [connectionStatus, setConnectionStatus] = useState(false);

// in a function
var thisPeerT = new Peer({
    initiator: false,
    config: {
        iceServers: iceServers,
    },
});

// signaling code

thisPeerT.on("connect", function (data) {
    console.log("onconnect");
    console.log(data);
    setConnectionStatus(true);
});

setThisPeer(thisPeerT);

In the on connect, I set a state hook that triggers a use effect where I create my on data.

useEffect(
    function () {
        console.log("here");
        console.log(roomID);
        console.log(thisPeer);
        console.log(connectionStatus);

        if (roomID && thisPeer && connectionStatus) {
            console.log("here2");
            thisPeer.on("data", function (data) {
                console.log(data);
            });
        }
    },
    [roomID, thisPeer, connectionStatus]
);

However, I get the following error when I try to use thisPeer.on("data"...

here
XXYDCgqle4XvZDZ6gm6
Peer {_readableState: ReadableState, readable: true, _events: {…}, _eventsCount: 4, _maxListeners: undefined, …}
true
here2

Uncaught ReferenceError: process is not defined
at resume (_stream_readable.js:905:1)
at Peer.Readable.resume (_stream_readable.js:895:1)
at Peer.Readable.on (_stream_readable.js:813:1)
at ConnectionContext.js:142:1
at invokePassiveEffectCreate (react-dom.development.js:23487:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
at unstable_runWithPriority (scheduler.development.js:468:1)

I have tried placing the on data at various places throughout my code, and regardless of the position, it seems this error occurs. If I call peer.send() on the other peer, it also gives a process is not defined error on the peer that received the data. Does anyone know how I can resolve the error or where I should open the data channel?

Upvotes: 1

Views: 2147

Answers (2)

Idanref
Idanref

Reputation: 345

Based on this post, make sure to create a file such as ./src/setup.js or ./src/process.js which includes the following:

import process from 'process';

global = window;
process = process;
Buffer = [];

Head into ./src/index.js and use:

import './[your-file]';
... Other imports & the rest of the code ...

Restart the app and it should work!

Upvotes: 1

Supakit Inkaew
Supakit Inkaew

Reputation: 11

I got the same issue but I can do a workaround by using CDN script

<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/9.11.1/simplepeer.min.js"></script>

And here is a code example of how to call it in React

var peer1 = new window.SimplePeer({ initiator: true })

Upvotes: 1

Related Questions