Next JS React Hooks and Sendbird UI Kit leads to mismatching versions of React

Sendbird Chat UIKit
, ,
1

There seems to be a bug with using Sendbird 2.2.1 and NextJS.

In short when trying to use React hooks with Sendbird UI Kit there is a React version mismatch which results in an unhandled runtime error.

I’ve created a minimal test case reproduction in Codesandbox

If you uncomment line 5 where I’m simply trying to use React state you’ll see the app React mismatch error. It might be to do with the way Sendbird UIKit is specifying the peer dependencies for react and react-dom.

I’ve tried to work around the issue but I believe it needs to be fixed in Sendbird UI Kit.

2

Hi @daveh,

Welcome to the Sendbird Community. Thank you for reporting this bug. I’ll bring this to the attention of our Engineering team for them to investigate.

3

Thanks @Tyler :+1: If any more information is needed happy to provide

4

Hi @daveh,

Our Engineering team came up with a workaround for this issue: exciting-gareth-dd4yv - CodeSandbox

Essentially it breaks down to this:
Currently:

import ChatItem from './chatItem';

<Channel
  ...
  renderChatItem={ChatItem}
/>

Suggestion:

import ChatItem from './chatItem';

<Channel
  ...
  renderChatItem={({ message }) => <ChatItem message={message} />}
/>
5

Excellent this works, thanks a lot :+1: :+1: