TypeError: t is not a function

[YohaanYoon]

Going through tutorial, ChannelList component works well. But, I received following error, when MessageList and MessageInput components:

MessageList.render
node_modules/stream-chat-react/dist/index.es.js:15770
15770 | }, t('Connection failure, reconnecting now...')),

When MessageList and MessageInput components removed in render(), it works.

[vishalnarkhede]

Hey @YohaanYoon thanks for bringing it up. I will check and get back to you!

[vishalnarkhede]

@YohaanYoon can you please share the code around how you are using MessageList and MessageInput?

Also which version of stream-chat-react are you using?

[YohaanYoon]

render() {
    const {
      chatClient,
      channel,
    } = this.state;
    const chatTranslate = chatTranslateInstance.getChatTranslate();

    if (!channel) return (<Spinner />);

    return (
      <div>
        <S.AppBar />
        <Chat client={chatClient} theme="messaging light" i18nInstance={chatTranslate}>
          <Channel channel={channel}>
            <Window>
              <MessageList />
              <MessageInput />
            </Window>
            <Thread />
          </Channel>
        </Chat>
      </div>
    );
  }

And, the version of stream-chat-react is 0.10.1.

[tbarbugli]

something is going wrong with the i18n setup, what does chatTranslateInstance.getChatTranslate() return?

For translations to work correctly, it should be something like this:

const i18n = new Streami18n({
  language: 'nl',
  translationsForLanguage: {
    'Nothing yet...': 'Nog Niet ...',
    '{{ firstUser }} and {{ secondUser }} are typing...':
      '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',
  },
});

@vishalnarkhede is this is a misconfiguration problem we should add some basic validation to catch it when Chat is constructed and i18nInstance is passed

[YohaanYoon]

@tbarbugli chatTranslateInstance.getChatTranslate() returns new Streami18n . ChannelList component works correctly. But, For MessageList and MessageInput components do not works.
Anyway, I will check my codes again.

[vishalnarkhede]

@YohaanYoon I have published a fix for this. Can you please check on 0.10.2

Its mostly because translator wasn't ready before rendering Chat component.

@vishalnarkhede is this is a misconfiguration problem we should add some basic validation to catch it when Chat is constructed and i18nInstance is passed

We have check if (i18nInstance && i18nInstance instanceof Streami18n) { ... }, which should be enough in my opinion, and since its working for ChannelList, don't think its a configuration issue.

[YohaanYoon]

Thanks. It works well.

But, I have found the other issues.
In MessageList component, when I click flag or mute buttons, console shows error message as follows:

Uncaught (in promise) TypeError: t is not a function
    at _callee2$ (index.es.js:12927)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:264)
    at Generator.prototype.<computed> [as next] (runtime.js:98)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)

index.es.js:12927
              case 9:
                _context2.prev = 9;
                _context2.t0 = _context2["catch"](2);
                errorMessage = _this.validateAndGetNotificationMessage(getMuteUserErrorNotification, [message.user]);
                addNotification(errorMessage ? errorMessage : t('Error muting a user ...'), 'error');

Uncaught (in promise) TypeError: t is not a function
    at _callee$ (index.es.js:12882)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:264)
    at Generator.prototype.<computed> [as throw] (runtime.js:98)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _throw (asyncToGenerator.js:29)

index.es.js:12882
              case 9:
                _context.prev = 9;
                _context.t0 = _context["catch"](2);
                errorMessage = _this.validateAndGetNotificationMessage(getFlagMessageErrorNotification, [message]);
                addNotification(errorMessage ? errorMessage : t('Error adding flag: Either the flag already exist or there is issue with network connection ...'), 'error');

I guess those are similar issues.
Please check it again.

[vishalnarkhede]

Thanks for brining it up @YohaanYoon . Translation context consumer is missing on that component. I will put up a fix soon :)

[vishalnarkhede]

@YohaanYoon fixed in 0.11.1 :)

[YohaanYoon]

@vishalnarkhede Thanks

[ssshah]

CreateGuest failed with error: "JWTAuth error: token contains an invalid number of segments getting this error on creating guest user what's the issue this was working perfect berfore
` this.chatClient = new StreamChat(streamChatKey,{ timeout: 10000 })

  // https://getstream.io/blog/chat-edge-infrastructure/
  this.chatClient.setBaseURL('https://chat.stream-io-api.com')
  const { me: guestUser } = await this.chatClient.setGuestUser({
    id: userId,
    name: userName
  })`