I am using MDB Pro 4.1.1 and loading the file mdb.js.
However then I get the following error:
Uncaught ReferenceError: Waves is not defined
First, in package.json change
"main": "js/mdb.min.js" to "main": "js/mdb.js",
and the in mdb.js comment next 6 lines:
Waves.attach(‘.btn, .btn-floating’, [‘waves-light’]);
Waves.attach(‘.waves-light’, [‘waves-light’]);
Waves.attach(‘.navbar-nav a:not(.navbar-brand), .nav-icons li a, .navbar form, .nav-tabs .nav-item’, [‘waves-light’]);
Waves.attach(‘.pager li a’, [‘waves-light’]);
Waves.attach(‘.pagination .page-item .page-link’, [‘waves-effect’]);
Waves.init();/* FORMS */
or try from this:
https://stackoverflow.com/questions/45804125/waves-is-not-defined-error-while-including-material-design-bootstrap-with-webp
Install node-waves:
npm install node-waves --save
Declare it in webpack (in both webpack.dev.conf.js and webpack.prod.conf.js):
new webpack.ProvidePlugin({
'Waves': 'node-waves'
}),
Hello Juan Lopez,
As I've written we aren't supporting Aurelia. I really would like to help to solve it but I don't have enough knowledge about this framework to solve it.
Regards,
I have the same problem have they solved it?
Hello William,
We currently don't support Aurelia.
Regards
Any progress with using MDB with Aurelia?
Hi @bartek-malanowski,"Waves is not defined" and those three mismatched errors are what I get. I am able to rid of the mismatched errors by manually adding a string ID to those three define() functions that return an error. The "Waves is undefined" error seems to arise because the function in the second parenthesis of the Waves IIFE doesn't run before Waves initialization begins.
(function (window, factory) {
'use strict';
// AMD. Register as an anonymous module. Wrap in function so we have access
// to root via this.
if (typeof define === 'function' && define.amd) { // this statement is true, define is defined in my vendor-bundle.js, it's undefined and does not run when running the tutorial.
define('factory', [], function () { // Added stringID to rid of this mismatched error.
return factory.apply(window);
});
}
// Node. Does not work with strict CommonJS, but only CommonJS-like
// environments that support module.exports, like Node.
else if (typeof exports === 'object') {
module.exports = factory.call(window);
}
// Browser globals.
else {
window.Waves = factory.call(window); <-- This runs in the getting started tutorial.
}
})(typeof global === 'object' ? global : this, function () { // This runs in the getting started tutorial and goes into the function to define Waves. In my vendor-bundle.js, I can breakpoint here but the function is completely skipped and it goes into Waves Initialization.
'use strict';
var Waves = Waves || {}; //Doesn't run in vendor-bundle.js
.......
return Waves;
});
//Initialization
Waves.attach('.btn, .btn-floating', ['waves-light']); //undefined in vendor-bundle.js since it skipped the function to define Waves, breaks my app.
@daniel_munoz, do you get any other console logs?
@bartek-malanowski, I'm having the same problem. I did an npm install mdbootstrap and added it to dependencies in aurelia.json.
{
"name": "vendor-bundle.js",
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"node_modules/requirejs/require.js"
],
"dependencies": [
...,
"jquery",
{
"main": "js/mdb",
"name": "mdbootstrap",
"path": "../node_modules/mdbootstrap/",
"resources": [
"css/mdb.css"
]
}
When the path is pointed to mdb.js or mdb.min.js I get 3 Mismatch anonymous define() module: errors,
Uncaught Error: Mismatched anonymous define() module: function (){
return Chart;
Uncaught Error: Mismatched anonymous define() module: function () {
return factory.apply(window);
}
Mismatched anonymous define() module: function (){return function(e,t,r,a){function n(e){for(var t=-1,r=e?e.length:0,a=[];++t<r;).......................................and on
@martin, could you please show me how do you import MDB?
I have the same issue. Has this been resolved?
I have the same problem.
I'm trying to load mdb 4.2.0 into Aurelia using the aurelia-cli. It uses require.js as loader.
I'm also getting this error from require.js: Uncaught Error: Mismatched anonymous define() module:
Please, contact me at b.malanowski@mdbootstrap.com
It's because I am trying to combile it using webpack.
