MaterialSelectView is not defined after upgrade to Webpack 5


Topic: MaterialSelectView is not defined after upgrade to Webpack 5

macrocom asked 1 months ago

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.


Marcin Luczak staff commented 1 months 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


macrocom answered 1 months ago

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 1 months ago

Thank you for this solution, this will help other users with the same issues :)

Keep coding, Marcin


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • 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