Unable to invite user to group call!?

I am trying to invite a user to a group call. I am always getting this error. I have tried different ID’s, different apps & scenarios. I am unable to debug any other way.

I am using “sendbird-calls”: “^1.10.9”,

Steps to reproduce:

  1. Create/Enter room with a user.
    I am using this repo for FE quickstart-calls-reactjs/sample-01 at main · sendbird/quickstart-calls-reactjs · GitHub
    The room interface does not have the sendInvitation method, but you can add that to statefyRoom in statefy.tsx.
  2. Create/Enter a room with another user.
  3. Try to send an invitation to the user created in step 1. Or any other sendbird user.
    According to the docs I am calling the method as follows: await room.sendInvitation(userID).

The error I am getting:
TypeError: Cannot read properties of undefined (reading ‘sender’)
at Object.eval (SendBirdCall.min.js:6:200755)
at tryCatch (main-v2_3388cc93185c23bfde6851c8ede5e3fd.js:2:552860)
at Generator. (main-v2_3388cc93185c23bfde6851c8ede5e3fd.js:2:555394)
at Generator.next (main-v2_3388cc93185c23bfde6851c8ede5e3fd.js:2:553635)
at jn (SendBirdCall.min.js:6:19034)
at o (SendBirdCall.min.js:6:19248)
at eval (SendBirdCall.min.js:6:19309)
at new Promise ()
at Object.eval (SendBirdCall.min.js:6:19181)
at Object.eval [as sendInvitation] (SendBirdCall.min.js:6:201042)
at _callee9$ (GroupCall.tsx:465:51)
at tryCatch (runtime.js:64:15)
at Generator.invoke (runtime.js:299:1)
at Generator.eval [as next] (runtime.js:124:1)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:25:1)
at eval (asyncToGenerator.js:32:1)
at new Promise ()
at eval (asyncToGenerator.js:21:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
at HTMLUnknownElement.sentryWrapped (helpers.js:74:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
at invokeGuardedCallback (react-dom.development.js:292:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306:1)
at executeDispatch (react-dom.development.js:389:1)
at executeDispatchesInOrder (react-dom.development.js:414:1)
at executeDispatchesAndRelease (react-dom.development.js:3278:1)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287:1)
at forEachAccumulated (react-dom.development.js:3259:1)
at runEventsInBatch (react-dom.development.js:3304:1)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514:1)
at handleTopLevel (react-dom.development.js:3558:1)
at batchedEventUpdates$1 (react-dom.development.js:21871:1)
at batchedEventUpdates (react-dom.development.js:795:1)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568:1)
at attemptToDispatchEvent (react-dom.development.js:4267:1)
at dispatchEvent (react-dom.development.js:4189:1)
at unstable_runWithPriority (scheduler.development.js:653:1)
at runWithPriority$1 (react-dom.development.js:11039:1)
at discreteUpdates$1 (react-dom.development.js:21887:1)
at discreteUpdates (react-dom.development.js:806:1)
at dispatchDiscreteEvent (react-dom.development.js:4168:1)
at HTMLDocument.sentryWrapped (helpers.js:74:1)

Hello, Arbnor_Lumezi. I’m Junyoung from the JavaScript Calls SDK team.

Your overall approach to implementing the invitation feature looks correct. Can you share the implementation that you added to the sample? I can help with the troubleshooting.

Thank you.

Hi @Junyoung_Lim. Thanks for the reply here is a fork you can use to test:

When on a group call, open the participant sidebar, you will see an “Invite” test button.
It will make a invitation to a userId which you need to edit in GroupCall.tsx file.

Thank you!

Found a solution, looks like the proper way to add the method to statefyRoom is this:

    sendInvitation(invitee: string) {
      return room.sendInvitation(invitee).then((data) => {
        return data;

I am not sure I understand it completely, but this does not work:

    sendInvitation: room.sendInvitation,