Topic: MaterialSelectView is not defined after upgrade to Webpack 5
I am using the latest MDB version (4.20.0) and have switched from Webpack 4 to 5 and since then everything works except MaterialSelect. I now get the error message:
jquery.js:4059 Uncaught ReferenceError: MaterialSelectView is not defined
at new MaterialSelect (VM9251 material-select.js:36)
at HTMLSelectElement.eval (VM9251 material-select.js:247)
at Function.each (VM9231 jquery.js:385)
at jQuery.fn.init.each (VM9231 jquery.js:207)
at jQuery.fn.init.$.fn.materialSelect (VM9251 material-select.js:245)
at HTMLDocument.eval (VM9319 selectbox.js:4)
at mightThrow (VM9231 jquery.js:3766)
at process (VM9231 jquery.js:3834)
Previously everything had worked, including the select fields and I didn't change anything in the code.
My selectbox.js code is simple:
export function selectbox() {
$(() => {
const $selectbox = $('.mdb-select');
$selectbox.materialSelect();
});
}
And my import:
import 'mdbootstrap-pro/js/src/pro/material-select/material-select-view-renderer';
import 'mdbootstrap-pro/js/src/pro/material-select/material-select-view';
import 'mdbootstrap-pro/js/src/pro/material-select/material-select';
I would be grateful for any help.
I have now modified the module locally and re-imported it and now it runs. My changes were rough:
delete "default" from export and import with curly brackets
import './vendor/material-select/material-select-view-renderer';
import './vendor/material-select/material-select-view';
import './vendor/material-select/material-select';
material-select.js:
import { MaterialSelectView } from './material-select-view';
material-select-view.js:
import { MaterialSelectViewRenderer } from './material-select-view-renderer';
export class MaterialSelectView {
material-select-view-renderer.js:
export class MaterialSelectViewRenderer {
Marcin Luczak staff commented 3 years ago
Thank you for this solution, this will help other users with the same issues :)
Keep coding, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: MDB4 4.19.2
- Device: Mac
- Browser: Google Chrome
- OS: Mac OS
- Provided sample code: No
- Provided link: No
Marcin Luczak staff commented 3 years ago
Hi,
Without having your webpack setup I can only suggest you check whether material select files are imported into the page and your function is invoked only when the page is loaded with those files. Also, you can check Webpack 4 to 5 migration changes to check if something affects your setup https://webpack.js.org/migrate/5/.
Please note that we do not provide support for custom solutions with Webpack and MDB4 jQuery as it was created with the Gulp in mind. Check our official Gulp tutorial https://mdbootstrap.com/education/bootstrap/gulp-installation/ and custom Webpack tutorial for MDB4 https://mdbootstrap.com/articles/jquery/md-bootstrap-webpack-tutorial/
Keep coding, Marcin