# React UIKit v3 error - ReferenceError: Element is not defined

**URL:** <https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243>\
**Category:** React\
**Tags:** uikit\
**Created:** [August 3, 2022, 11:28am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243 "2022-08-03T11:28:19Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![minhdat97](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/minhdat97/32/1811_2.png) [@minhdat97](https://community.sendbird.com/u/minhdat97)\
**Post date:** [August 3, 2022, 11:28am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/1 "2022-08-03T11:28:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![minhdat97](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/minhdat97/32/1811_2.png) [@minhdat97](https://community.sendbird.com/u/minhdat97)\
**Post date:** [August 3, 2022, 11:49am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/2 "2022-08-03T11:49:50Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [August 4, 2022, 1:15am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/3 "2022-08-04T01:15:57Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![minhdat97](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/minhdat97/32/1811_2.png) [@minhdat97](https://community.sendbird.com/u/minhdat97)\
**Post date:** [August 4, 2022, 2:34am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/4 "2022-08-04T02:34:38Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/0/0562b6ba94d133443b4b0375dfd3403fa62d664d.jpeg)

Here is tracelog.

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [August 4, 2022, 3:23am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/5 "2022-08-04T03:23:45Z")

</div>

Let me see what I can find

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [August 4, 2022, 5:16am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/6 "2022-08-04T05:16:21Z")

</div>

Can you see if this sample works for you?

> <https://github.com/sravan-s/nextjs_sample/blob/main/pages/Chat2.js#L23>

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

---

<div class="post-metadata">

**Author:** ![minhdat97](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/minhdat97/32/1811_2.png) [@minhdat97](https://community.sendbird.com/u/minhdat97)\
**Post date:** [August 4, 2022, 5:39am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/7 "2022-08-04T05:39:42Z")

</div>

> [@Sravan\_S](#):
>
> Before, dynamic import of component used to work. Somehow it stopped working from 12.xx?

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

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [August 4, 2022, 8:00am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/8 "2022-08-04T08:00:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [August 4, 2022, 8:01am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/9 "2022-08-04T08:01:49Z")

</div>

cc @Tyler incase if we get similar questions

---

<div class="post-metadata">

**Author:** ![minhdat97](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/minhdat97/32/1811_2.png) [@minhdat97](https://community.sendbird.com/u/minhdat97)\
**Post date:** [August 4, 2022, 8:13am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/10 "2022-08-04T08:13:34Z")

</div>

Yep, I fixed.  
Thank you so much.

---

<div class="post-metadata">

**Author:** ![andynguyen](https://avatars.discourse-cdn.com/v4/letter/a/bbce88/32.png) [@andynguyen](https://community.sendbird.com/u/andynguyen)\
**Post date:** [August 9, 2022, 7:59pm UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/11 "2022-08-09T19:59:03Z")

</div>

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:

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

```

See attachements:

 ![Screen Shot 2022-08-09 at 2.52.58 PM](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/b/b1262e34f7e91675d1f0fcabac44e200fd4dc9fc.png)

---

<div class="post-metadata">

**Author:** ![andynguyen](https://avatars.discourse-cdn.com/v4/letter/a/bbce88/32.png) [@andynguyen](https://community.sendbird.com/u/andynguyen)\
**Post date:** [August 9, 2022, 8:35pm UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/12 "2022-08-09T20:35:33Z")

</div>

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

```auto
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>
)

```

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [August 11, 2022, 12:22am UTC](https://community.sendbird.com/t/react-uikit-v3-error-referenceerror-element-is-not-defined/5243/13 "2022-08-11T00:22:06Z")

</div>

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