Issue with social-messenger-ts

[matsmello]

Hello team, I tried to run the social-messenger-ts repository but unfortunately didn't work.
I added the variable keys to the .env file but this was my final result.

I am also receiving this error on my console tab on Google Chrome.

These were my steps:

1. yarn install
2. copied .env-example to .env.development
3. replaced the example keys with my keys
4. run

To find the REACT_APP_STREAM_KEY, I used this value:

To find the REACT_APP_USER_ID, I used this value:

To find the REACT_APP_USER_TOKEN, I used the link mentioned with the secret and user id mentioned above.

Probably, I am missing something since it is my first time using this service, but I would appreciate some help, thank you in advance.

[oliverlaz]

hi @matsmello, thanks for trying out our demo.

From the screenshot you provided, everything seems to be ok as the error you see shouldn't be related to us but to some 3rd party browser extension you might be using.

The probable reason why your version of the app looks empty is the lack of data. May I ask you to create a few users and channels in our backend dashboard first?

• https://dashboard.getstream.io/

Additionally, you can use the following sample data generator (useful for test/dev environments):

• https://generator.getstream.io/

Please let me know how it goes.

[matsmello]

Hello @oliverlaz, thank you for the quick response.
I used the generator tool, and it seems now that I have users and channels but my screen is still empty.

This is my current dashboard:

I can see conversations and users on the dashboard but on the react app I am still seeing this:

Can you tell me if it is working on your side? I don't want to bother you for something stupid on my side.
Thank you again for helping me.

[oliverlaz]

hi @matsmello, can you check whether your current user alternlp is a member of those channels? I'd guess it isn't.
You have two options, add the user to the channels manually on the dashboard or, you can tweak the default filters:

• https://github.com/GetStream/website-react-examples/blob/master/social-messenger-ts/src/channelListOptions.ts#L15

You can read more about filtering and querying in general in our documentation:

• https://getstream.io/chat/docs/sdk/react/components/core-components/channel_list/
• https://getstream.io/chat/docs/javascript/query_channels/?language=javascript