Customize to ReactJS

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

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?

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 :slight_smile:

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

:heavy_multiplication_x: 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

:heavy_multiplication_x: 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 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

Thanks for the detailed reply, let me check and get back to you

@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

optimization: {
    minimize: false
 }

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

### 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

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;
}
})

1 Like

Interesting

So you changed all this -

// 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

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 };

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