caught (in promise) TypeError: Cannot read properties of undefined (reading 'call') at Peer.Readable (_stream_readable.js:178:10)

Question

Follow the demo to do the multiple users conferencing, the demo was not created based on react vite, but I do. The code is similar with the demo, but it shows the error. Is this caused by vite? I have used "vite-compatible-simple-peer" as well but it still doesn't work.

tream_readable.js:178 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call')
    at Peer.Readable (_stream_readable.js:178:10)
    at new Duplex (_stream_duplex.js:51:12)
    at new Peer (index.js:37:5)
    at createPeer (createroom.jsx:72:16)
    at createroom.jsx:43:28
    at Array.forEach (<anonymous>)
    at Socket2.<anonymous> (createroom.jsx:42:17)
    at Emitter.emit (index.mjs:136:20)
    at Socket2.emitEvent (socket.js:498:20)
    at Socket2.onevent (socket.js:485:18)
R

it shows the error with "new Peer()"

function createPeer(userToSignal, callerID, stream) {
  const peer = new SimplePeer ({
    initiator: true,
    trickle:false,
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
    stream: stream, 
  });

  peer.on("signal", signal => {
    socketRef.current.emit("sending signal", { userToSignal, callerID, signal })
  });

  return peer;
}

function addPeer(incomingSignal, callerID, stream) {
  const peer = new SimplePeer ({
    initiator: false,
    trickle:false,
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
    stream: stream, 
  });

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  }
  
});

I have used "vite-compatible-simple-peer" as well but it still doesn't work. The completed client-server is:

import { useEffect, useRef, useState } from "react";
import "./createRoom.css";
import io from "socket.io-client";
import { useParams } from "react-router-dom";
import  SimplePeer  from "simple-peer";
  const Video = (props) => {
    const ref = useRef();

    useEffect(() => {
      if (props.peer) {
        props.peer.on("stream", stream => {
          ref.current.srcObject = stream;
        });
      }
    }, []);

  return (
    <video
      style={{ width: "100%", transform: "rotateY(180deg)" }}
      ref={ref}
      autoPlay
      playsInline
    ></video>
  );
};

export default function CreateRoom({ username }) {
  const [peers, setPeers] = useState([]);
  const socketRef = useRef();
  const userVideo = useRef();
  const peersRef = useRef([]);
  const { id } = useParams();
  const roomID = id;

  useEffect(() => {
    socketRef.current = io.connect("http://localhost:3000/");
    navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
      userVideo.current.srcObject = stream;
      socketRef.current.emit("join room", roomID);
      socketRef.current.on("all users", users => {
          const peers = [];
          users.forEach(userID => {
              const peer = createPeer(userID, socketRef.current.id, stream);
              peersRef.current.push({
                  peerID: userID,
                  peer,
              })
              peers.push(peer);
          })
          setPeers(peers);
      })

      socketRef.current.on("user joined", payload => {
        console.log(payload);
          const peer = addPeer(payload.signal, payload.callerID, stream);
          peersRef.current.push({
              peerID: payload.callerID,
              peer,
          })

          setPeers(users => [...users, peer]);
      });

      socketRef.current.on("receiving returned signal", payload => {
          const item = peersRef.current.find(p => p.peerID === payload.id);
          item.peer.signal(payload.signal);
      });
  })
}, [roomID]);

function createPeer(userToSignal, callerID, stream) {
  const peer = new SimplePeer ({
    initiator: true,
    trickle:false,
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
    stream: stream, 
  });

  peer.on("signal", signal => {
    socketRef.current.emit("sending signal", { userToSignal, callerID, signal })
  });

  return peer;
}

function addPeer(incomingSignal, callerID, stream) {
  const peer = new SimplePeer ({
    initiator: false,
    trickle:false,
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
    stream: stream, 
  });

  peer.on("signal", signal => {
      socketRef.current.emit("returning signal", { signal, callerID })
  });

  peer.on("stream", stream => {
      const item = {
          peerID: callerID,
          peer,
          stream,
      };
      peersRef.current.push(item);
      setPeers(users => [...users, peer]);
  });

  peer.signal(incomingSignal);

  return peer;
}

  return (
    <div className="video-wrap">
      <span style={{ position: "absolute", top: "1px", left: "1px" }}>
        {username}
      </span>
      <video
        style={{ width: "100%", transform: "rotateY(180deg)" }}
        ref={userVideo}
        autoPlay
        playsInline
      ></video>
      {peers.map((peer, index) => {
        return <Video key={index} peer={peer} />;
      })}
    </div>
  );
}

Answer 1

This might solve the problem for you:

vite-plugin-node-polyfills

I was using vuejs with vite, simple-peer and pusher. The error I was encountering looked similar to the one you've shown, mine traced back further to 'Stream' being undefined.

After installing that pollyfill and adding it to the vite.config.js file the error was fixed.