# Next JS+ React JS 17 error

**URL:** <https://community.sendbird.com/t/next-js-react-js-17-error/1905>\
**Category:** React\
**Tags:** javascript, uikit, bug\
**Created:** [March 17, 2021, 11:13pm UTC](https://community.sendbird.com/t/next-js-react-js-17-error/1905 "2021-03-17T23:13:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mariano\_Lopez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/mariano_lopez/32/1091_2.png) [@Mariano\_Lopez](https://community.sendbird.com/u/Mariano_Lopez)\
**Post date:** [March 17, 2021, 11:13pm UTC](https://community.sendbird.com/t/next-js-react-js-17-error/1905/1 "2021-03-17T23:13:20Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/f/f14e4dbcbc0b386b10f7c32286358d3f1a6ad3d9.png)

Can someone help me with this?

Thanks,  
Regards.

---

<div class="post-metadata">

**Author:** ![Tyler](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tyler/32/810_2.png) [@Tyler](https://community.sendbird.com/u/Tyler)\
**Post date:** [March 18, 2021, 12:57pm UTC](https://community.sendbird.com/t/next-js-react-js-17-error/1905/2 "2021-03-18T12:57:26Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![Mariano\_Lopez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/mariano_lopez/32/1091_2.png) [@Mariano\_Lopez](https://community.sendbird.com/u/Mariano_Lopez)\
**Post date:** [March 18, 2021, 5:49pm UTC](https://community.sendbird.com/t/next-js-react-js-17-error/1905/3 "2021-03-18T17:49:55Z")

</div>

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