# Customize to ReactJS

**URL:** <https://community.sendbird.com/t/customize-to-reactjs/320>\
**Category:** API\
**Created:** [May 27, 2020, 3:25am UTC](https://community.sendbird.com/t/customize-to-reactjs/320 "2020-05-27T03:25:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeffrey\_Rose](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jeffrey_rose/32/180_2.png) [@Jeffrey\_Rose](https://community.sendbird.com/u/Jeffrey_Rose)\
**Post date:** [May 27, 2020, 3:25am UTC](https://community.sendbird.com/t/customize-to-reactjs/320/1 "2020-05-27T03:25:49Z")

</div>

I have followed the instructions to create a reactJS app using the widget found here. [https://github.com/sendbird/SendBird-JavaScript/blob/master/web-widget/CUSTOMIZE.md](https://github.com/sendbird/SendBird-JavaScript/blob/master/web-widget/CUSTOMIZE.md)

however I get the following error:  
**export ‘default’ (imported as ‘SendBirdWidget’) was not found in './widget.SendBird’**

Has anyone had success getting the widget to work in a react app?

---

<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:** [May 27, 2020, 7:33am UTC](https://community.sendbird.com/t/customize-to-reactjs/320/2 "2020-05-27T07:33:02Z")

</div>

Hello @Jeffrey_Rose Can you tell me your build environment(OS, NodeJS, npm version)

Also, a full stack trace or screenshot of the error will be helpful 🙂

---

<div class="post-metadata">

**Author:** ![Jeffrey\_Rose](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jeffrey_rose/32/180_2.png) [@Jeffrey\_Rose](https://community.sendbird.com/u/Jeffrey_Rose)\
**Post date:** [May 27, 2020, 3:34pm UTC](https://community.sendbird.com/t/customize-to-reactjs/320/3 "2020-05-27T15:34:17Z")

</div>

Thanks for your response!  
Here is the console output from the build and after that the console output from running the app and finally a snippet from the js file:

jeff@Jeffs-MBP web-widget % npm run build

> Sample-JS-Web-Widget@0.18.0 build /Users/jeffrose/Documents/GitHub/SendBird-JavaScript/web-widget

> webpack --mode production

Hash: **6da2ef615d5fb2b02d08**

Version: webpack **4.43.0**

Time: **4883** ms

Built at: 05/26/2020 **10:19:15 PM**

**Asset**  **Size**  **Chunks**  **Chunk Names**

**widget.SendBird.js**  **2.04 MiB**  **0** **[emitted]** **[big]** widget

Entrypoint **widget** **[big]** = **widget.SendBird.js**

[66] **(webpack)/buildin/global.js** 472 bytes { **0** } **[built]**

[131] **multi babel-polyfill ./src/js/widget.js** 40 bytes { **0** } **[built]**

[334] **./src/scss/widget.scss** 1.2 KiB { **0** } **[built]**

[335] **./node\_modules/css-loader/dist/cjs.js!./node\_modules/sass-loader/dist/cjs.js!./src/scss/widget.scss** 46.2 KiB { **0** } **[built]**

[345] **./src/js/widget.js + 9 modules** 125 KiB { **0** } **[built]** **[2 warnings]**

| **./src/js/widget.js** 35.1 KiB **[built]** **[1 warning]**

| **./src/js/consts.js** 2.19 KiB **[built]**

| **./src/js/utils.js** 5.13 KiB **[built]**

| **./src/js/elements/widget-btn.js** 4.47 KiB **[built]**

| **./src/js/elements/list-board.js** 17.2 KiB **[built]**

| **./src/js/elements/chat-section.js** 26.9 KiB **[built]**

| **./src/js/elements/popup.js** 10.2 KiB **[built]**

| **./src/js/elements/spinner.js** 3.86 KiB **[built]**

| **./src/js/adapter.js** 12.6 KiB **[built]** **[1 warning]**

| **./src/js/elements/elements.js** 7.39 KiB **[built]**

- 341 hidden modules

**WARNING in ./src/js/adapter.js**

**Module Warning (from ./node\_modules/eslint-loader/index.js):**

**/Users/jeffrose/Documents/GitHub/SendBird-JavaScript/web-widget/src/js/adapter.js**

**31:9** warning Unexpected console statement no-console

36:11 warning Unexpected console statement no-console

68:11 warning Unexpected console statement no-console

79:9 warning Unexpected console statement no-console

95:11 warning Unexpected console statement no-console

106:9 warning Unexpected console statement no-console

116:9 warning Unexpected console statement no-console

142:11 warning Unexpected console statement no-console

168:9 warning Unexpected console statement no-console

244:9 warning Unexpected console statement no-console

**✖ 10 problems (0 errors, 10 warnings)**

@ ./src/js/widget.js 14:0-43 224:20-35

@ multi babel-polyfill ./src/js/widget.js

**WARNING in ./src/js/widget.js**

**Module Warning (from ./node\_modules/eslint-loader/index.js):**

**/Users/jeffrose/Documents/GitHub/SendBird-JavaScript/web-widget/src/js/widget.js**

**53:7** warning Unexpected console statement no-console

68:7 warning Unexpected console statement no-console

362:19 warning ‘user’ is defined but never used no-unused-vars

**✖ 3 problems (0 errors, 3 warnings)**

@ multi babel-polyfill ./src/js/widget.js widget[1]

**WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).**

**This can impact web performance.**

**Assets:**

**widget.SendBird.js (2.04 MiB)**

**WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.**

**Entrypoints:**

**widget (2.04 MiB)**

**widget.SendBird.js**

**WARNING in webpack performance recommendations:**

**You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.**

**For more info visit [Code Splitting | webpack](https://webpack.js.org/guides/code-splitting/)**

jeff@Jeffs-MBP web-widget % node --version

v13.6.0

jeff@Jeffs–MBP web-widget % npm --version

6.13.4

APP console -------------------------------------------  
client:126 [WDS] Warnings while compiling.  
warnings @ client:126  
client:135 ./src/routes/PharmacistPortal/LandingPage/index.js 106:4-18  
"export ‘default’ (imported as ‘SendBirdWidget’) was not found in ‘…/…/…/widget.SendBird’  
warnings @ client:135  
index.js:131 Uncaught TypeError: Cannot read property ‘start’ of undefined  
at LandingPage.componentDidMount (index.js:131)  
at LandingPage.componentDidMount (react-hot-loader.development.js:704)  
at commitLifeCycles (react-dom.development.js:17335)  
at commitAllLifeCycles (react-dom.development.js:18737)  
at HTMLUnknownElement.callCallback (react-dom.development.js:150)  
at Object.invokeGuardedCallbackDev (react-dom.development.js:200)  
at invokeGuardedCallback (react-dom.development.js:257)  
at commitRoot (react-dom.development.js:18949)  
at eval (react-dom.development.js:20419)  
at Object.unstable\_runWithPriority (scheduler.development.js:255)

FROM widget.SendBird.js  
return SBWidget;\n}(); // window.sbWidget = new SBWidget();\n\n\nvar sbWidget = new widget\_SBWidget();\nwindow.sbWidget = sbWidget;\n/\* harmony default export \*/ var js\_widget = **webpack\_exports** [“default”] = (sbWidget);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMzQ1LmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vU2VuZEJpcmRXaWRnZXQvLi9zcmMvanMvY29uc3RzLmpzPzdkNTkiLCJ3ZWJwYWNrOi8vU2VuZEJpcmRXaWRnZXQvLi9zcmMvanMvdXRpbHMuanM/YThh

---

<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:** [May 28, 2020, 2:09am UTC](https://community.sendbird.com/t/customize-to-reactjs/320/4 "2020-05-28T02:09:03Z")

</div>

Thanks for the detailed reply, let me check and get back to 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:** [May 28, 2020, 3:23am UTC](https://community.sendbird.com/t/customize-to-reactjs/320/5 "2020-05-28T03:23:15Z")

</div>

@Jeffrey_Rose

So, I experienced a problem while building web-widget for react too, it was because create-react-app webpack had problems with minimized version of widget.SendBird.js

To solve this, I added

```auto
optimization: {
    minimize: false
 }

```

to `SendBird-JavaScript/web-widget/webpack.config.js` before running the step

```auto
### Rebuild Widget Sample
Rebuild widget sample using webapck.  
npm run build

```

Can you try and see if this solves the issue?  
For more context [https://github.com/sendbird/SendBird-JavaScript/pull/129](https://github.com/sendbird/SendBird-JavaScript/pull/129)

---

<div class="post-metadata">

**Author:** ![Jeffrey\_Rose](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jeffrey_rose/32/180_2.png) [@Jeffrey\_Rose](https://community.sendbird.com/u/Jeffrey_Rose)\
**Post date:** [May 29, 2020, 6:48am UTC](https://community.sendbird.com/t/customize-to-reactjs/320/6 "2020-05-29T06:48:22Z")

</div>

> [@Sravan\_S](#):
>
> widget.SendBird.js

I and a colleague have tried to get the sample React code in the SendBird readme file to work. Neither of us could get it to work. I have made some changes to my code and it is working.

I changed the last line of the Widget.js file to:  
export { sbWidget };

In the React file that loads the widget I used:  
import { sbWidget } from ‘…/widget.SendBird’;

window.SendBirdWidget.sbWidget.startWithConnect(‘APP\_ID’, USER\_ID, USER\_NICKNAME’, function (user, error) {if (error) {  
return;  
}  
})

---

<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:** [May 29, 2020, 11:32am UTC](https://community.sendbird.com/t/customize-to-reactjs/320/7 "2020-05-29T11:32:28Z")

</div>

Interesting

So you changed all this -

```auto
// window.sbWidget = new SBWidget();
var sbWidget = new SBWidget();
window.sbWidget = sbWidget;
export default sbWidget;

```

into

`export { sbWidget };`

* * *

Or only:  
`export default sbWidget;` **into** `export { sbWidget };` ?

Also, can you tell me how did you import **SendBirdWidget** in your App?  
I am a bit curious about what went wrong

---

<div class="post-metadata">

**Author:** ![Jeffrey\_Rose](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jeffrey_rose/32/180_2.png) [@Jeffrey\_Rose](https://community.sendbird.com/u/Jeffrey_Rose)\
**Post date:** [June 2, 2020, 4:49pm UTC](https://community.sendbird.com/t/customize-to-reactjs/320/8 "2020-06-02T16:49:26Z")

</div>

i only have five lines of code in my index.js file:

import SendBird from ‘sendbird’;  
import { sbWidget } from ‘…/…/…/widget.SendBird’;

window.SendBird = SendBird;  
window.SendBirdWidget.sbWidget.startWithConnect(‘xxx’, function (user, error) {  
if (error) {  
return;  
}  
})

```
   <div id="sb_widget"></div>

```

in your widget.js i have the following:  
var sbWidget = new SBWidget();  
window.sbWidget = sbWidget;  
export { sbWidget };

---

<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:** [June 3, 2020, 8:21am UTC](https://community.sendbird.com/t/customize-to-reactjs/320/9 "2020-06-03T08:21:11Z")

</div>

Hmm, This is what we recommend -\> [https://codesandbox.io/embed/romantic-cartwright-fpx5s?fontsize=14&hidenavigation=1&theme=dark](https://codesandbox.io/embed/romantic-cartwright-fpx5s?fontsize=14&hidenavigation=1&theme=dark)