Topic: Select not working, console shows error with popper
The select should display options when clicked on.
No options are displayed at all. The select never opens to display an option.
Other elements like button ripples and navtabs work as expected. For some reason select will not work. When I click on a select, I get this message in in the console. The file referenced is "createPopper.js:81:37"
Any ideas on this one?
Uncaught ReferenceError: process is not defined
setOptions createPopper.js:81
C createPopper.js:215
_openDropdown index.js:964
open index.js:931
toggle index.js:919
_listenToWrapperClick index.js:610
i event-handler.js:102
_ event-handler.js:200
on event-handler.js:228
_listenToWrapperClick index.js:609
_bindComponentEvents index.js:361
_init index.js:327
$ index.js:139
t index.js:1409
t index.js:1406
Webpack 6
i
t
i
2 createPopper.js:81:37
setOptions createPopper.js:81
C createPopper.js:215
_openDropdown index.js:964
open index.js:931
toggle index.js:919
_listenToWrapperClick index.js:610
i event-handler.js:102
(Async: EventListener.handleEvent)
_ event-handler.js:200
on event-handler.js:228
_listenToWrapperClick index.js:609
_bindComponentEvents index.js:361
_init index.js:327
$ index.js:139
t index.js:1409
forEach self-hosted:203
t index.js:1406
Webpack 6
i
t
i
Alright, @kpienkowska helped point me in a new direction. In the Import MDB section docs it says to use the following to import MDB5 JS using Webpack:
import * as mdb from 'mdb-ui-kit';
That is not what I want since it imports all of the JS and there are some things I want to exclude. So I decided to change my custom mdb-pro.js file to look something like this:
// BOOTSTRAP CORE COMPONENTS
import {
Button,
Offcanvas,
Carousel,
Popover,
ScrollSpy,
...[list of components that I want to use]...
} from 'mdbootstrap-pro'
The from mdbootstrap-pro is the directory of MDB5 in the node_modules directory. After running a build, everything works as expected... that I see so far.
Does your example work in snippets?
If it does there is a problem with your imports or local config. Please explain how you've done an import of the MDB package and make sure that you have all necessary dependencies.
webservices pro premium priority commented 2 years ago
I tested this as a snippet. It worked. So it must be how I am importing.
I am using webpack to pull in all of MDB5 Pro. I copied /mdbootstrap-pro/src/mdb/js/mdb.pro.js to my own source directory at my-project/assets/src/js/frontend/mdb-pro.js and updated the paths. So it looks like this:
import Button from 'mdbootstrap-pro/src/mdb/js/free/button';
import Offcanvas from 'mdbootstrap-pro/src/mdb/js/bootstrap/mdb-prefix/offcanvas';
import Carousel from 'mdbootstrap-pro/src/mdb/js/free/carousel';
import Popover from 'mdbootstrap-pro/src/mdb/js/free/popover';
...
We are not using some components so we are not including the following: * charts * lightbox * rating * infinit-scroll * perfect-scrollbar
I looked in the source of a couple components that use @popperjs/core and they seem to import it. So there is no need for us to include it in the JS, right? If so, how would you suggest doing that? I have tried adding it to our build process but it didn't make a difference.
kpienkowska staff commented 2 years ago
It's not a save way to import files.
The obvious way is that you leave mdb.pro.js where it was and comment out pro components that you don't need. That way you make sure that you still include all dependencies and utilities.
Then import mdb.pro.js in your JS file.
You may benefit from reading our instruction of using MDB and webpack: https://mdbootstrap.com/docs/standard/getting-started/webpack-integration/#section-import-mdb
Did you import
webservices pro premium priority commented 2 years ago
I get the same results when using the original mdb.pro.js file as shown in the Import MDB section.
I'm curious, if I use the CDN version (https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.2.0/mdb.min.js) is all of the JS I need bundled there? So is popperjs/core in there along with MDB's custom JS?
kpienkowska staff commented 2 years ago
It's not. CDN link is available only for free version.
Did you use this command npm i --save-dev @popperjs/core detect-autofill chart.js chartjs-plugin-datalabels deepmerge perfect-scrollbar to install additional dependencies?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.2.0
- Device: Computer
- Browser: Firefox
- OS: Windows
- Provided sample code: No
- Provided link: No
webservices pro premium priority commented 2 years ago
I forgot to mention that I copied the last example of a form from the docs of forms. I chose that one since it had a select.