# Element is not defined

**URL:** <https://community.sendbird.com/t/element-is-not-defined/1437>\
**Category:** React\
**Created:** [December 13, 2020, 12:38am UTC](https://community.sendbird.com/t/element-is-not-defined/1437 "2020-12-13T00:38:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Janick](https://avatars.discourse-cdn.com/v4/letter/j/f0a364/32.png) [@Janick](https://community.sendbird.com/u/Janick)\
**Post date:** [December 13, 2020, 12:38am UTC](https://community.sendbird.com/t/element-is-not-defined/1437/1 "2020-12-13T00:38:59Z")

</div>

Hello,

I’m trying to implement Sendbird-uikit but I’m having a problem right at the build:

 ![Screen Shot 2020-12-13 at 01.30.50](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/1X/71f53b29b990783bb69539601bc89a3b23077137.jpeg)

I’ve tried with sendbird-uikit v1.2.8 and with 1.3.0 but I still have the same error.  
I’m using:

- next 10.0.3
- react 17.0.1
- react-dom 17.0.1
- NodeJS v15 (I’ve tried with v12 also)

I’ve also tried with sendbird-uikit 2.0.0-alpha.0 but this time I get this error:  
/Users/janick/Projects/clients/livedesigners/livedesigners-app/node\_modules/sendbird-uikit/dist/esm/index.js:1  
export { g as getStringSet, w as withSendBird } from ‘./LocalizationContext-619bafba.js’;  
^^^^^^

SyntaxError: Unexpected token ‘export’  
at wrapSafe (node:internal/modules/cjs/loader:999:16)  
at Module.\_compile (node:internal/modules/cjs/loader:1047:27)  
at Object.Module.\_extensions…js (node:internal/modules/cjs/loader:1112:10)  
at Module.load (node:internal/modules/cjs/loader:948:32)  
at Function.Module.\_load (node:internal/modules/cjs/loader:789:14

Anyone knows how to fix this problem?

Best,

Janick

---

<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:** [December 14, 2020, 2:28am UTC](https://community.sendbird.com/t/element-is-not-defined/1437/2 "2020-12-14T02:28:28Z")

</div>

Hello, Can you share your implementation (with 1.3.1)?

And for sendbird-uikit 2.0.0-alpha.0 it looks like you are trying to import our esm module(which is in sendbird-uikit/dist/esm/index.js) as a CommonJS module. Anyways, we will be changing the import structure a little, so, we still recommend using v1.3.x

> **[import vs require - ESM & commonJs module differences](https://www.voidcanvas.com/import-vs-require/)**
>
> ECMAScript Modules (ESM) are still in stage 3 (not finalized).
> 
> 
> 
> 
> 
> require
> import
> 
> 
> 
> Dynamic evaluation
> Static evaluation
> 
> 
> Throws error at runtime
> Throws error while parsing
> 
> 
> Non lexical

---

<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:** [December 14, 2020, 5:31am UTC](https://community.sendbird.com/t/element-is-not-defined/1437/3 "2020-12-14T05:31:49Z")

</div>

[https://codesandbox.io/s/cocky-hawking-h3zbs](https://codesandbox.io/s/cocky-hawking-h3zbs) this is a sample we have for nextJS

So, the idea is that for using UIKit has a lot of dynamic data in it, so we have to dynamically-import UIKit

> **[Advanced Features: Dynamic Import | Next.js](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssrI)**
>
> Dynamically import JavaScript modules and React Components and split your code into manageable chunks.

---

<div class="post-metadata">

**Author:** ![Janick](https://avatars.discourse-cdn.com/v4/letter/j/f0a364/32.png) [@Janick](https://community.sendbird.com/u/Janick)\
**Post date:** [December 14, 2020, 9:28am UTC](https://community.sendbird.com/t/element-is-not-defined/1437/4 "2020-12-14T09:28:04Z")

</div>

Hello Sravan,

Thank you for your replies.

I’ve spotted two things required to make it work with NextJS. First one is indeed the dynamic import, and the second one is that `sendbird-uikit` isn’t compatible with React (`react` and `react-dom`) above `16.13.1`.

For anyone having a similar problem, check in the package-lock that you don’t have any dependencies using React above `16.13.1` as sometimes `16.14.0` is used and is causing problems.

Best,

Janick

---

<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:** [December 16, 2020, 1:13am UTC](https://community.sendbird.com/t/element-is-not-defined/1437/5 "2020-12-16T01:13:57Z")

</div>

Hm, interesting! Sometime before, we have checked with 16.14.0 and 17.0.0 and the library worked fine. Can you share the error log when you tried 16.14.0?

---

<div class="post-metadata">

**Author:** ![Janick](https://avatars.discourse-cdn.com/v4/letter/j/f0a364/32.png) [@Janick](https://community.sendbird.com/u/Janick)\
**Post date:** [December 16, 2020, 2:34pm UTC](https://community.sendbird.com/t/element-is-not-defined/1437/6 "2020-12-16T14:34:02Z")

</div>

Hello,

I’ll try to test it again and give you more information as soon as I’m less busy with the implementation (pretty urgent project 😉 )

Best,

Janick