React UIKit v3 error - ReferenceError: Element is not defined

minhdat97 · August 3, 2022, 11:28am

Hello,
I’m upgrading React UIKit from v2 to v3 and got an error message ReferenceError: Element is not defined

My project enviroments following:

Nextjs: ^12.1.2,
React: ^17.0.2,
@sendbird/uikit-react: ^3.1.0

minhdat97 · August 3, 2022, 11:49am

@Sravan_S Hi Sravan,
My project is using Nextjs and having problem as above when integrating React UIKit v3. Can you help me to solve this?
Thank you.

Sravan_S · August 4, 2022, 1:15am

Hello @minhdat97

ReferenceError: Element is not defined is not very useful, can you share the full trace? or even a minimum reproducible repo in codesandbox/github?

minhdat97 · August 4, 2022, 2:34am

Sorry, I haven’t been able to reproducible repo yet.

Here is tracelog.

Sravan_S · August 4, 2022, 3:23am

Let me see what I can find

Sravan_S · August 4, 2022, 5:16am

Can you see if this sample works for you?

github.com

sravan-s/nextjs_sample/blob/main/pages/Chat2.js#L23


      
            ssr: false,
          });
          const ChannelListProvider  = dynamic(import("@sendbird/uikit-react/ChannelList/context").then(module => module.ChannelListProvider), {
            ssr: false,
          });
          
          
const Chat = () => {
            const [currentChannelUrl, setCurrentChannelUrl] = useState(null);
            return (
              <SendbirdProvider
                appId="XXXXX"
                userId="sendbird"
                nickname="sendbird"
              >
                <ChannelListProvider
                  onChannelSelect={(channel) => {
                    setCurrentChannelUrl(channel?.url);
                  }}
                >
                  <ChannelListUI />
                </ChannelListProvider>

Before, dynamic import of component used to work. Somehow it stopped working from 12.xx?

minhdat97 · August 4, 2022, 5:39am

I changed to import dynamic for Channel, ChannelList, Provider and it worked. How about hooks, for example useChannelContext, how I can dynamic import it?

Sravan_S · August 4, 2022, 8:00am

When I checked
import { useChannelListContext } from "@sendbird/uikit-react/ChannelList/context";
These worked fine

Sravan_S · August 4, 2022, 8:01am

cc @Tyler incase if we get similar questions

minhdat97 · August 4, 2022, 8:13am

Yep, I fixed.
Thank you so much.

andynguyen · August 9, 2022, 7:59pm

I had this issue with <Channel>. After importing dynamically, I’m having trouble passing props in the the component.

How I imported based on code above:

const Channel = dynamic(import("@sendbird/uikit-react/Channel"), {
  ssr: false,
})

See attachements:

andynguyen · August 9, 2022, 8:35pm

I looked through the uikit code in github and was able to resolve by doing the following:

import { ChannelContextProps } from '@sendbird/uikit-react/Channel/context'
const Channel = dynamic(import("@sendbird/uikit-react/Channel"), {
  ssr: false,
})
const channelProps: ChannelContextProps = {
  channelUrl: CHANNEL_URL,
  replyType: 'QUOTE_REPLY',
  disableUserProfile: true,
  isMessageGroupingEnabled: true,
}

return (
<SendbirdProvider
  appId="XXXXX"
  userId="sendbird"
  nickname="sendbird"
>
  <Channel {...channelProps} />
</SendbirdProvider>
)

Sravan_S · August 11, 2022, 12:22am

Hmm, this never happened on my sample projects…
Let us investigate. Can you share your project config?

React UIKit v3 error - ReferenceError: Element is not defined

Not finding what you need