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