ReactNative and @twilio/conversations

Hello everyone!

Can any of you Twilio evangelists confirm that @twilio/conversations (JS SDK) are compatible with react-native?

So far it seems to be working while I'm using it, but it does throw some errors in the debugger console.

I'm having issues where the application won't work without a debugger attached nor in release mode.

It may be due to incompatibility with @twilio/conversations or another library react-native-twilio-video-webrtc

Did anyone run into similar problems?

Any feedback is welcome. Thanks

Answers

  • sbrijmohan
    sbrijmohan admin
    edited August 6

    Hi @mappdevs1 , I have reached out to our support team and it should be compatible, Twilio Frontline is written in React Native and uses the Conversations SDK. @dtoomey do you have any advice as to why there may be issues?

  • Not that I know of. You can certainly look at how Video and Conversations work together in our ReactJS app here. It is probably best to file a support ticket on this one with details of the specific Conversations API errors you are seeing.

  • @sbrijmohan But does the app use Android SDK or JS SDK for conversations?

    I'm having issues with JS SDK in the react-native app. There's no wrapper around Android SDK for react-native that I know of.

    @dtoomey I have worked on top of that example to create a web interface to participate in calls, I'm having issues with the implementation I'm mobile app.

  • I attached the log file I exported from the debugger console. I kind of thing that @twilio/conversations depends on some browser API which are working in react-native while debugger is on, but fails to do so when debugger is not present.

  • Hey @mappdevs1, I've spoken with the Conversations team before and they have tried to make sure that the conversations JS SDK is compatible with React Native and I believe that is what they are using in Twilio Frontline.

    This question came up on Stack Overflow recently too. The solution seemed to be to set "inlineRequires: false" in metro.config.js. Can you try that and let me know how you get on?

  • @pnash inlineRequires are set to false by default and the issue still persists. I think I might need to create a minimalistic reproducible example to try and debug this one.

  • Creating a minimal reproducible example would be useful for us to see what is going on too. Especially since you are not the only one who has experienced this.

    Were any of the other suggestions from the Stack Overflow discussion of help to you to fix this at all? Can you share how you were importing the module and creating the client?

  • So I can confirm that the problem is actually in Twillio conversations. When the debugger is not running the app just gets stuck on the following line.

    ConversationsClient.create(token, { logLevel: "debug" })

    The promise to create the client never resolves, not rejects with an error.

    import { Client as ConversationsClient } from "@twilio/conversations";
    import type { Conversation, Message, Paginator } from "@twilio/conversations";
    
    import { useQuery, useQueryClient, InfiniteData } from "react-query";
    
    
    ...
    
    
    const client = useRef<ConversationsClient>();
    const [conversations, setConversations] = useState<Set<Conversation>>(new Set());
    
    const { data: tokenData } = useQuery(
        ["token"],
        () =>
          chatAPI
            .post<{ token: string }>("/token", {
              user_identity: user?.id,
            })
            .then(({ data }) => data),
        {
          enabled: !!user?.id,
          staleTime: 0,
          cacheTime: 0,
          onSuccess: ({ token }) => {
            // eslint-disable-next-line dot-notation
            chatAPI.defaults.headers["Authorization"] = `Bearer ${token}`;
    
            return ConversationsClient.create(token, { logLevel: "debug" })
              .then((conversationsClient) => {
                client.current = conversationsClient;
    
                client.current
                  .getSubscribedConversations()
                  .then(({ items }) => {
                    setConversations(new Set([...items]));
                  })
                  .catch(console.log);
              })
              .catch(console.log);
          },
        },
      );
    

    If I comment out the code for creating the conversation, the app works as usual without problems.

  • Oh, one other thing, just to check. Have you npm installed events? I've seen other instances where that was needed.

  • @pnash Yes, I did add it, it did not work without it initially. It's on version ^3.3.0

  • Hello all,

    We had the same issue. We suspect it's because @twilio/conversations has an outdated version of core-js as a dependency. Perhaps the debugger provides a newer version of core-js and this is why it worked during debugging only.

    We added core-js as a top-level dependency in our project and things are working now.

    We also noticed that using console.log on anything produced by @twilio/conversations (objects, events, etc.) results in errors and very high memory usage. Not sure why this is.

    Best,

    GA

  • @g_a

    Any specific version of core-js? I installed the latest version (^3.16.1) as a dependency to the project and the issue still persists.

    Thanks

  • We have the same version, and it works for us.

  • We're seeing a similar issue. Our app is working fine on web (with Expo web) but crashes in Expo Go due to @twilio/conversations (using version 1.2.3). We've added core-js (3.16.2) and events (3.3.0), and set linlineRequires to False to no avail. The errors I'm seeing are:

    Unhandled promise rejection, [RangeError: Maximum call stack size exceeded.]
    at node_modules/@twilio/conversations/node_modules/core-js/internals/host-report-errors.js:5:32 in module.exports
    at http://192.168.0.11:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:325124:138 in dispatchEvent
    

    and:

    Unhandled promise rejection, [ReferenceError: Can't find variable: document]
    at node_modules/@twilio/conversations/node_modules/core-js/internals/host-report-errors.js:5:32 in module.exports
    at http://192.168.0.11:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:325124:138 in dispatchEvent
    

    and are all triggered by calling:

    const newClient = await Client.create(token)
    
    

    where Client is imported via:

     import { Client } from '@twilio/conversations'
    
    

    Any help would be appreciated.

  • @pnash can you comment on this?

  • @ylivne, or indeed anyone with this issue, are you able to create a minimal reproducible example of this? My completely bare bones React Native app does not suffer from this issue. Is there another dependency that triggers this issue? Or a particular use?

    Thanks!

  • @pnash

    It's hard to tell. I tried re-creating it in a minimal example and was unsuccessful. In my original app, it seems that @twilio/conversations was conflicting with expo-splash-screen due to some racing condition.

    After I removed the SplashScreen.preventAutoHideAsync() and switched to automatically hiding the splash screen, it kind of works but is still throwing maximum call stack exceeded error.

    I had to install disable linlineRequires as well. If I enable linlineRequires the error is gone, but the client fails to initiate.

    Attached the Twilio logs on where its handing when linlineRequires is true

  • Hey @mappdevs1, I don't see the logs you said were attached.

    When you said you were unsuccessful in creating a minimal example, is the issue that your minimal example doesn't fail? Minimal example doesn't mean just the smallest example possible with the code, but the smallest example that fails. It could be a setting that you are missing from your main application, or a dependency. I have noticed that these issues may appear in apps that are also using Twilio Video via the community maintained React Native library. Can you try adding the dependencies until the error happens?

  • @pnash I reattached the logs.

    The minimal example I created was not failing. I added all the dependencies that I was suspecting can cause some issues, including Twilio Video, but no luck so far.

    I'll try adding more dependencies when I get the chance to try and find what's breaking it. Problem is, the app I'm working on has lots of dependencies including some native code.

  • I've figured out my issue - oddly this came down to having a few console.log statements where I was logging large objects (like Client). The web browser could handle those but this made my react app choke with these weird and seemingly unrelated errors. Discovered this by trying to create a minimal example and discovering that even the simplest implementation broke Expo Go.

  • That's an interesting discovery @ylivne, thanks for sharing! @mappdevs1 are you logging something large that the app can't handle?

  • ylivne
    ylivne
    edited September 1

    One more update: I'm still seeing the second error:

    Unhandled promise rejection, [ReferenceError: Can't find variable: document]
    at node_modules/core-js/internals/host-report-errors.js:5:32 in module.exports
    at http://192.168.4.30:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:332415:138 in dispatchEvent
    at node_modules/core-js/modules/es.promise.js:163:23 in perform$argument_0
    at node_modules/core-js/internals/perform.js:3:20 in module.exports
    at node_modules/core-js/modules/es.promise.js:160:22 in task.call$argument_1
    
    

    but things seem to be working fine otherwise.

  • Hi @pnash, I can also confirm I am experiencing the identical issue to other posters here. Especially in regards to unhandled promises. I have attached a screenshot of the exception raised on Android. Issue happens with and without the debugger running. The client could connect on an iOS simulator, with the debugger running; but other promises raised in different parts of the app for the same reasons detailed on the Android screenshot. If the iOS debugger is not running the app crashes like Android upon when the client initialises.

  • Hey everyone, I have had a word with the Conversations team and here's the current state of play.

    They are aware that there has been some things broken in the latest Conversations SDK in React Native. Being aware is a good start, but there is more to it. The SDK is currently moving towards version 2 and the latest release candidate, version 2.0.0-rc.0, does work in React Native.

    However, there is a warning here too. There's a lot more work coming to the v2 RCs and the advice from the team is not to build anything critical on the release candidates, but to wait for the full version 2 release. You are welcome to try the RC to make sure it does work for you, just don't go to production on a release candidate version!

    So, the team is aware of React Native issues, they are fixing them, and a bright new future of version 2 is coming soon!

If this is an emergency, please contact Twilio Support. This is not an official Support channel. https://support.twilio.com/
Have an urgent question?
Please contact Twilio Support. This is not an official Support channel.
Contact Support