React Native & Sendbird not working

Sendbird Chat API/SDK JavaScript
,
1

Hi everyone, I have been trying to build a simple react native chat following the Sendbird tutorial here: https://blog.sendbird.com/react-native-chat-tutorial-one-build-chat-with-sendbird/

I don’t know whether it is out of date, but it just isn’t working. When I try to import sendbird and initialise a connection, I get an error saying Unable to resolve module fs from 'node_modules/sendbird/SendBird.min.js

This is how to repro

  1. I created my project using the React Native CLI ( react-native init ChatApp )
  2. I installed Sendbird with npm (npm install sendbird)
  3. I then tried to import the module (import SendBird from ‘sendbird’; in app.js)

Can someone tell me where I am going wrong here? I feel it is something to do with the sendbird dependency not being in the right place (maybe its not meant to be installed by npm - but this is what the tutorial advised)

2

Hi @emmad,

The blog link you shared was written in November of 2017 (3 years ago!!!) which is not probably best one to follow. (I delivered this information to our team)

For latest sample app that you want to use can be found

and we just released UI Kit today which you can also check out at

3

Hi Eric,

Unfortunately, I still can’t get it working in react native - found this issue (https://github.com/sendbird/SendBird-JavaScript/issues/113) which seems similar although I tried to downgrade to 3.0.117 as per the answer and it still didn’t work.

As I am new to javascript and react-native world, please would you be able to give me more explicit instructions on how I can install sendbird into my react-native app (using npm?) and then import into my script? Apologies if this is very basic but I have been struggling with this for two days now :frowning:

image
image1205×704 226 KB

4

@emmad

My apologies for the late response.

Our engineering team is working really hard to make a fix of this bug.

It should be fixed by 4/3 PST and will let you know if there is any blocker for the fix

1 Like
6

Hey @emmad ! Please post your metro.config.js and package.json.

The error message you’re getting from Metro bundler shows that you’re trying to run fs, which is a Node js core module. We’ve all been here at one point or another, so don’t feel bad :slight_smile:

There are a few ways to go about this, here’s two:

  1. Best Approach Include a resolver: { extraNodeModules: … } config in your metro.config.js file. Here can learn more here: Metro Docs: Resolver Options

  2. Alternatively, you can use a library like rn-nodeify but this adds a ton of extra weight to your App. However, it’s super useful if you’ll be using other core Node modules (ex. crypto for hashing, etc)

Here are the reference links:

Also, this is a great article on including core Node modules into an RN project:

Lastly, since you mentioned you’re new to JS and React Native, I’d highly recommend spending a day or two on this React Native course from Harvard’s CS50 classes. It’s on Youtube and totally free (the guy speaks a bit slow so I recommend putting it on speed 1.5x haha). It’s one of the best series of videos out there on RN. Unlike most “tutorials”, this one is really well-grounded on CS and software engineering:

Good luck and keep it up, you’ll be an RN rockstar in no time!

David

1 Like
7

Hi David,

Thanks so much for this detailed response. I actually downgraded my sendbird package to 3.0.117 THEN re read cd iod, pod install, cd … (which I hadn’t done in my previous post) and it worked without the fs error. Thanks for the info about rn-nodeify though, it looks very helpful.

I have looked at the article and Harvard course and they look fantastic - thanks so much for sharing. I have been plodding away with the tutorial and got it to connect to the sendbird servers now (yey). However, the next hurdle I am on is at the point of adding the disconnect function and getting the same error as this: https://stackoverflow.com/questions/56725477/undefined-is-not-an-object-evaluating-menu-isdisconnected (following the code exactly as it is here: https://blog.sendbird.com/react-native-chat-tutorial-3-menu-screen/). Any advise?

Thanks again so much for this help. I look forward to using SendBird extensively in my app once I have crossed this hurdle!

2 Likes
8

@emmad Thanks great that you got it working and our apologies for the problem you had to go through. But I am happy that you are getting closer to the launch!

Once you launch your project, would you like to share your project with other SendBird community members by sharing details in show & tell category? (https://community.sendbird.com/c/show-tell/7)

And please let us know if you have any other problems moving forward !!

9

@inrecovery Thank you for helping other fellow community members :slight_smile: :smiling_face_with_three_hearts: (lots of love on your way from SendBird)

Thank you for sharing the Harvard course as well, in fact, I actually took that class when it was just released!

10

Hi Eric - thanks so much for the help and yes that sounds great. I do have another problem as described to David above. Would you be able to help?

If it is easier, I can post it in a new Q+A to distinguish it as a separate issue.

Thanks,
Emma

1 Like
11

@emmad Yes, new Q&A would work!!

12

Thanks @eric.kim! Happy to help :slight_smile:

13

Hey @emmad! Awesome glad you’re making progress. I replied to your other Q&A with the solution and got your app running on my laptop! Go check it out and good luck )

1 Like