Next JS+ React JS 17 error

Sendbird Chat UIKit React
, ,
1

Hi community
I’m currently integrating SendBird on my next js app with react 17, I have read and cloned Sendbird-Javascript example (in specific with sendbird-uikit) and stand-alone works well but when I pass Chat components and install the dependencies I have the next error.

SendBirdError
SendBirdError2534×1556 914 KB

Can someone help me with this?

Thanks,
Regards.

2

@Mariano_Lopez,

Welcome to the Sendbird Community! I’d be happy to take a look at this with you. Could you share your implementation of the Sendbird UIKit?

-Tyler

3

Hi Tyler, Thank you so much for reply
I just create a modal component which renders Chat component.
Chat components is the same component that I found in Sendbird-javascript git project in uikit-samples directory the example is called composed-react-app.
I just hardcode a valid userId and nickname.
I installed “sendbird”: “^3.0.145” and “sendbird-uikit”: “^2.1.0”

chat component code is the following:

    import { useRouter } from 'next/router';
    import React, { useEffect, useState } from 'react';
    import {
      SendBirdProvider,
      ChannelList,
      Channel,
      ChannelSettings,
    } from 'sendbird-uikit';
    import 'sendbird-uikit/dist/index.css';

export default function Chat({ userId, nickname, theme }) {
    const router= useRouter();
    useEffect(() => {
        if (!userId || !nickname) {
            router.push('/');
        }
    }, [userId, nickname, router]);
    const [showSettings, setShowSettings] = useState(false);
    const [currentChannelUrl, setCurrentChannelUrl] = useState(null);
    return (
        <div style={{ height: '100vh' }}>
        <SendBirdProvider
            appId={process.env.NEXT_PUBLIC_SENDBIRD_APP_ID}
            theme={theme}
            userId={userId}
            nickname={nickname}
        >
            <div className="sendbird-app__wrap">
            <div className="sendbird-app__channellist-wrap">
                <ChannelList
                onChannelSelect={(channel) => {
                    if (channel && channel.url) {
                    setCurrentChannelUrl(channel.url);
                    }
                }}
                />
            </div>
            <div className="sendbird-app__conversation-wrap">
                <Channel
                channelUrl={currentChannelUrl}
                onChatHeaderActionClick={() => { setShowSettings(true); }}
                />
            </div>
            </div>
            {showSettings && (
            <div className="sendbird-app__settingspanel-wrap">
                <ChannelSettings
                channelUrl={currentChannelUrl}
                onCloseClick={() => { setShowSettings(false); }}
                />
            </div>
            )}
        </SendBirdProvider>
        </div>
    )
}

I don’t understand if I need another dependency or what is the meaning of the error that I have when I started my next js app.

I hope hear from you soon. Thanks

Regards.

-Mariano Lopez

1 Like