Stack Exchange
how to remove parcelRequire is not defined with peerjs in ionic
i am building a video chat application with ionic 5, i dont know how to properly use it, i tried but i keep getting this error in the console
Uncaught ReferenceError: parcelRequire is not defined
    at push../node_modules/peerjs/dist/peerjs.min.js.parcelRequire.EgBh (peerjs.min.js:1)
    at Object../node_modules/peerjs/dist/peerjs.min.js

Here is my code
import { Injectable } from '@angular/core';
import Peer from 'peerjs';

@Injectable({
    providedIn: 'root' 
}) 
export class WebrtcService {
    peer: Peer;
    myStream: MediaStream;
    myEl: HTMLMediaElement;
    partnerEl: HTMLMediaElement;
    options:any= {
        host: 'localhost',
        port: 9000,
        path: '/peerjs',
        debug: 3,
        config: {
            'iceServers': [{
                    url: 'stun:stun1.l.google.com:19302'
                },{
                    url: 'turn:numb.viagenie.ca',
                    credential: 'muazkh',
                    username: 'webrtc@live.com'
                }
            ]
        }
    }
    constructor() {}

    getMedia() {
        navigator.getUserMedia({ audio: true, video: true },stream=>this.handleSuccess(stream),
        (error) =>this.handleError(error));
    }

    async init(userId: string, myEl: HTMLMediaElement, partnerEl: HTMLMediaElement) {
        this.myEl = myEl;
        this.partnerEl = partnerEl;
        try {
            this.getMedia();
        } catch (e) {
            this.handleError(e);
        }
        await this.createPeer(userId);
    }

    async createPeer(userId: string) {
        this.peer = new Peer(userId, this.options);
        this.peer.on('open', ()=>this.wait())
    }

    call(partnerId: string) {
        const call = this.peer.call(partnerId, this.myStream);
        call.on('stream', (stream)=>this.partnerEl.srcObject = stream);
    }

    wait() {
        this.peer.on('call', (call) => {
            call.answer(this.myStream);
            call.on('stream', (stream) =>this.partnerEl.srcObject = stream);
        });
    }

icomment most of the code to find out where the error is coming from, i noticed that the error happens when this.peer = new Peer(userId, this.options); is being runned.
Also i noticed that if i should run this in other pages it will work, but if it is being run in a app.component.ts, it will give me that error, i seriously need the above code to be in app.component.ts

Try this:
<script>
    var parcelRequire;
</script>

(From here.)

Solved the issue for Stencil.js integration for me, thanks.

If your script uses type="module" - remove it.

hi can you elaborate for the knowledge purpose ?

It is solved in parcel version 2,
simply install parcel
npm i -D parcel


Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

For some reason, this isn't in the "Getting Started" section of the Parcel documentation.  I bootstrapped an app from scratch, installing only minimal dependencies for react.  Then installed only parcel-bundler and got this error.  Installed parcel as well, and it's fixed.
