“sendbird-uikit”: “^2.4.0-alpha-0” with dependencies: “css-vars-ponyfill”: “^2.4.6”, “date-fns”: “^2.23.0”, “react”: “^16.13.1”, “react-dom”: “^16.13.1”, “sendbird”: “^3.0.154”. Developing on Mac (10.15.5) using react and webpack to build.
Very basic error. When running my app, I am getting an import error: “Uncaught Error: Cannot find module ‘sendbird-uikit’…” it seems like the build cannot find my installed sendbird-uikit package/module (I can see it in my package.json and its relevant data in the package-lock.json). Not sure what to do at this point saw that there is a newer sendbird-uikit-src in npm now (should I use that instead? → even though I tried that too and got the same error).
Hi there and welcome to the Sendbird community!!
This is probably an issue with your Webpack setup that is not finding the node modules correctly.
Do you have module resolution inside of your Webpack config file?
Hey Charis,
Thanks for the tip. If this is the case, in order to find your sendbird modules, where would my webpack have to look? I have yet to run into any problems with the webpack config/build I am using to-date: all of the other npm packages I have installed have never had issues (and we use multiple other third party npm packages).
So what likely happened is that there was an alpha version of the package on npm which got deprecated so it wouldn’t be picked up (2.4.0-alpha-0), however anyone who installed that package during the time window it was available, would’ve pulled that version down and have the version # in their package.json
If you change the ‘2.4.0-alpha-0’ to ‘2.3.1’ in your package json and reinstall it, you should have a working setup again
Ok thanks! I’ll try it out!
Yup its working! I had to use this though: import {App} from “sendbird-uikit”; instead of import {App as SendBirdApp} from “sendbird-uikit”; Thanks for the help.
Great so glad to hear that! Thanks for reporting back
Hey, I am running into a few css/ui issues where sendbird modals, like the “sendbird-add-channel__rectangle” (div nested deep in the modal dom for example), are getting hidden behind our webapp’s content and other chat dashboard pop-up icons are getting placed oddly or are overlapping other sendbird components in non-good-looking ways. We are going to be putting the sendbird chat dashboard ui in a react component that has a higher z-index (above 10) and is css absolutely positioned over other react components/webapp content so I get why odd stuff may be happening with the sendbird ui. How can we edit the sendbird modal css, or add/edit the css of sendbird components in general, or what advice do you have to navigate these sendbird component ui sillies?
Thanks!
Hey @95tristanl – I’d recommend just overriding the CSS properties you want to customize.
If you include a css file in your web app you could easily add something like:
div#sendbird-add-channel__rectangle {
z-index: 90000;
}
to use the cascading prioritization of CSS (with dev#element being a higher priority then just #element) to override whichever property you would like to customize.
Worst case you could chose to use a hammer and use !important to force the override.
