Topic: materialSelect Not a function
Hi,
I have a laravel project. I use npm for sass and js compiler.
Now i require the files :
window.$ = window.jQuery = require('jquery');
require('./../../node_modules/mdbootstrap-pro/js/bootstrap.js');
require('./../../node_modules/mdbootstrap-pro/js/mdb.js');
And in my index.blade.php, i have
$(document).ready(function() {
$('.mdb-select').materialSelect();
});
Now i the get the error:
Uncaught TypeError: $(...).materialSelect is not a function
If i call the function in de console(of chrome). I get the same error.
What is wrong?
Kind Regards,
Ah, i get the following error:
TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
at Object.<anonymous> (app.js?id=ea2971a7b78046d64f91:45071)
at Object../node_modules/mdbootstrap-pro/js/mdb.js
Mateusz Łubianka staff commented 12 months ago
Hi @ld4unity,
The problem only occurs with select?
Best,
I have the same problem. I tried
$('.mdb-select').formSelect()
And I get the same message. Please advise.
The examples on your website use
$('.mdb-select').materialSelect();
Grzegorz Bujański staff commented 6 months ago
Hi. You should use $('.mdb-select').materialSelect();. Is only select not working or other functions (e.g. Sidenav) too? What does your Webpack config look like? Do you have any errors during compilation or after page load?
RichardT pro premium commented 5 months ago
I have the same problem, Sidenav is working fine, materialSelect isn't.
Grzegorz Bujański staff commented 5 months ago
I need more information to figure out why this doesn't work. Do you have any errors in your console? How do you initialize select? Are you doing this inside document ready function? It would be great if you create a snippet in which I can recreate this bug.
RichardT pro premium commented 5 months ago
I'm using Rails 6 and Webpacker and I have included the pro version with a javascript include tag (like: script src="/js/mdb.min.js" ) so that webpacker won't compile the javascript which would give me an error (Cannot assign to read only property 'exports' of object '#').Both putting the materialSelect() in a script right after the select itself and in the $(function(){}) will give me the error: materialSelect is not a function.Hope this helps
Grzegorz Bujański staff commented 5 months ago
At the moment, if you add our library to a framework that uses a webpack, it is necessary to add individual modules from the src folder. This can be helpful when configuring: https://gist.github.com/PabloCamp0s/a22b810af012d6110e98cb7539e96484#file-material-design-bootstrap-js
RichardT pro premium commented 5 months ago
That works! Thanks
Grzegorz Bujański staff commented 5 months ago
Great, I'm glad it helped you solve your problem.
Answered
- User: Pro
- Premium support: No
- Technology: jQuery
- MDB Version: 4.15.0
- Device: Levono T480
- Browser: chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Mike Portman commented 12 months ago
Try .formSelect() instead of .materialSelect
ld4unity pro priority vip early access commented 12 months ago
The same error...