"Cannot read property 'emit' of undefined" when calling transport.produce

Hi!

I’m trying to integrate Mediasoup into my project and started by simply porting this example GitHub - mkhahani/mediasoup-sample-app: Mediasoup v3 sample app (which works well when run as a standalone).

However as soon as I try to call transport.produce() on the frontend I face an error “Cannot read property ‘emit’ of undefined” thrown from mediasoup-client/lib/EnhancedEventEmitter.js

Everything before that point runs smoothly, all the data exchanged with the server corresponds more or less to the data in the example above.

I found a similar issue on GitHub (TypeError in Transport.ts, transport.produce() failing · Issue #127 · versatica/mediasoup-client · GitHub) but @ibc directed that person to the forums, and I couldn’t find that topic here. Has anyone here faced anything similar to my problem? I would be very thankful for any possible hints.

UPD:
Adding console.log(this) into EnhancedEventEmitter, function safeEmitAsPromise, makes it work. But how to avoid that error without modifying Mediasoup’s code?

That modification shouldn’t make it work unless it’s some weird race condition in a multithreaded environment. Very odd!

I’ve found mediasoup to be very stable and predictable, so this is likely related to your specific implementation of the API.

Did you createWebRtcTransport and implement the .on() produce and connect events? Finding out which object is undefined can be helpful in figuring out

Can you post a debug log from the client? That might be helpful.

You can also try to catch this exception in DevTools and see the execution context… That might help.

My gut feeling is that there’s some issue in the way you implemented one of the two events.

That modification shouldn’t make it work unless it’s some weird race condition in a multithreaded environment. Very odd!

I’ve changed it to const x = this to make it silent. Still works (and still doesn’t work without it 🤷)

Did you createWebRtcTransport and implement the .on() produce and connect events?

Yes, it now all works perfectly, with tracks being produced and consumed. It’s just that weird bug and its fix that makes me wonder.

I’ve found mediasoup to be very stable and predictable

It’s smth with the JS wrapper only, not with the server.

Can you post a debug log from the client? That might be helpful.

Sure. Here you go:

Uncaught (in promise) TypeError: Cannot read property 'emit' of undefined
    at eval (EnhancedEventEmitter.js?149a:25)
    at new Promise (<anonymous>)
    at eval (EnhancedEventEmitter.js?149a:23)
    at new Promise (<anonymous>)
    at Chrome74.safeEmitAsPromise (EnhancedEventEmitter.js?149a:22)
    at Chrome74.eval (Chrome74.js?42d6:485)
    at new Promise (<anonymous>)
    at Chrome74._setupTransport (Chrome74.js?42d6:475)
    at Chrome74.eval (Chrome74.js?42d6:202)

To be frank I suspect Webpack. Or some sort of a weird combination of mediasoup-client and webpack.

The mediasoup code all looks good to me in this call tree. What I find strange about this tree is the multiple eval() calls - not really sure where that’s coming from (definitely not MS). Maybe it is webpack…

Is the error reproducible if you disable webpack?

If you find webpack is an issue, I’ve used Browserify with mediasoup successfully.

Oops, it’s a big existing project already, simply removing webpack might be challenging. I will test a production build locally though, if the bug is not there then it’s the local setup for sure.

What I find strange about this tree is the multiple eval() calls

This also makes me think it’s some debug environment hot-reload chunk management. The question is though if it’s possible to make mediasoup-client compatible with it, and why is it only MS code that is affected.

Anyway, thanks for the hints! I will continue my research and will update the top post with any findings that could be helpful for others.

Pack mediasoup client in a separate script, for instance, by means of browserify, which is definitely works, and reference it through a global variable.