Crash - ERROR [TypeError: imageProp.includes is not a function (it is undefined)]

[Saad-Bashar]

Whenever I get a new message from another user the <Channel /> component crashes. It crashes on the Avatar component from stream chat RN components. The is where it exactly crashes getResizedImageUrl,

uri:
    !imageProp ||
    imageProp.includes(randomImageBaseUrl) ||
    imageProp.includes(randomSvgBaseUrl)
      ? imageProp?.includes(streamCDN)
        ? imageProp
        : `${randomImageBaseUrl}${
            name ? `?name=${getInitials(name)}&size=${size}` : ''
          }`
      : getResizedImageUrl({
          height: size,
          url: imageProp, //  ---------- IT CRASHES ON THIS LINE, imageProp.includes is not a function  ---------
          width: size,
        }),

Please note that all my users are not connected with avatar. Some users may have avatar, some users don't have any avatar. How can we fix this issue? Thanks!

[fathulfahmy]

I am getting the same error. The app crashes upon receiving new message on channel screen.

• Expo: version: 52.0.43

• Stream Chat: stream-chat-expo: 6.0.1

• Platform: iOS and Android

• Full implementation can be viewed here: Link to GitHub blob

• Screenshot:

• 

[khushal87]

Hey @Saad-Bashar @fathulfahmy, I am not able to reproduce this crash but I get this could happen. But to appropriately fix it. I would need to provide the same env. Can you share with me if the user with the image(for which it crashes) has name, and is its imageUrl undefined/null?

[fathulfahmy]

Thank you @khushal87 for pointing out the cause of error. I mistakenly set user image to an object instead of uri. The issue has been solved for me.

User JSON

"user": {
      "id": "1",
      "name": "Demo User 1",
      "email": "[email protected]",
      "email_verified_at": "2024-12-30T16:40:24.000000Z",
      "created_at": "2024-12-30T16:40:24.000000Z",
      "updated_at": "2024-12-30T16:40:24.000000Z",
      "deleted_at": null,
      "avatar": {
        "uri": "http://172.20.10.3:8000/storage/images/placeholder_image_500_500.png",
        "name": "placeholder_image_500_500.png",
        "type": "image/png"
      },
      "media": []
    }

Incorrect user initialization

      await client.connectUser(
        {
          id: data.user.id,
          name: data.user.name,
          image: data.user.avatar,
        },
        data.chat_token,
      );

Correct user initialization

      await client.connectUser(
        {
          id: data.user.id,
          name: data.user.name,
          image: data.user.avatar.uri,
        },
        data.chat_token,
      );

[khushal87]

That's the only case in which I can predict something like this will happen. 😅

[khushal87]

What about you @Saad-Bashar?