React JS Error "Uncaught (in promise) TypeError: socket.emitWithPromise is not a function"

Question

I'm getting the Uncaught in promise error which says that this function is not a function I don't understand exactly why its giving me this error.

Here's the function I made "emitWithPromise":

import React from 'react';
import io from 'socket.io-client';
import { SocketContext } from './SocketContext';
import SocketEvents from 'constants/socket-events';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionCreators as callsActionCreators } from 'state/calls/actions';
import { isAuthenticated, getAccessToken } from 'infrastructure/auth';
import { incomingCallSound, stopIncomingCallSound, dropSound } from 'components_amwell/CallSounds';
import { APP_CONFIG } from 'constants/global-variables';

class Socket extends React.Component {
    constructor(props) {
        super(props);
        
        if (!isAuthenticated()) {
            return;
        }

        //const signalingUrl =
        //process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test' ? process.env.REACT_APP_SIGNALING_URL : window.__env__.REACT_APP_SIGNALING_URL;
        const signalingUrl = APP_CONFIG.URL.signalingPath;

        this._socket = io.connect(signalingUrl, {
            secure: true,
            transports: ['websocket'],
        });

        let userProfile = null;
        if (localStorage.getItem('userProfile')) {
            userProfile = JSON.parse(localStorage.getItem('userProfile'));
        }

        const myClientInfo = {
            token: getAccessToken(),
            incomingCallsDisabled: userProfile != null ? userProfile.incomingCallsDisabled : false,
            clearConferences: true,
        };

        this._socket.on('connect', _data => {
            this._socket.emit('client.authorize', myClientInfo);
        });

        this._socket.on('client.authenticated', _data => {});

        this._socket.on('client.unauthorized', function(error) {});

        this._socket.on('disconnect', _data => {});

        this._socket.on(SocketEvents.Conference.ON_INCOMING, conferenceInfo => {
            incomingCallSound();
            this.props.calls.setConferenceInfo(Object.assign(conferenceInfo, { isReceivingCall: true }));
        });

        this._socket.on(SocketEvents.Conference.ON_INITIATOR_LEFT, () => {
            this.props.calls.setConferenceInfo(null);
            stopIncomingCallSound();
            dropSound();
        });

        this._socket.on('error', function(err) {
            console.error('Socket.IO error:' + err);
        });

        this.emitWithPromise = this.emitWithPromise.bind(this);
    }

    emitWithPromise = async (event, data) => {
        return new Promise((resolve, reject) => {
            this._socket.emit(event, data, resolve);
        });
    };

    render() {
        return <SocketContext.Provider value={this._socket}>{this.props.children}</SocketContext.Provider>;
    }
}

const mapStateToProps = state => {
    return {
        calls: state.calls,
    };
};

const mapDispatchToProps = dispatch => {
    return {
        calls: bindActionCreators(callsActionCreators, dispatch),
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(Socket);

When I use this function somewhere else it shows the error:

Uncaught (in promise) TypeError: socket.emitWithPromise is not a function

I am using it in another file like this:

const response = await socket.emitWithPromise(SocketEvents.Conference.START, conferenceInfo);

Also the return in the code the:

<SocketContext.Provider

is returning to this code which only has this much code, I thought it would be best to share just incase:

import React from 'react';

export const SocketContext = React.createContext({});

Answer 1

i think you need to return here

emitWithPromise = async (event, data) => {
        return new Promise((resolve, reject) => {
            return this._socket.emit(event, data, resolve);
        });
    };