Topic: Proper structure for using with RequireJs -- Urgent

devtrix pro asked 5 years ago


Although I've seen this asked before, there are no clear cut answer to address this. Could you kindly provide an example of a Requirejs Config file please. I am seeing that your globals such as WOW & Waves are not being set. I have followed all kinds of resolutions to no end. I'd greatly appreciate your prompt response as I am running out of time. Thanks in advance, Raj

bhavinshah free answered 3 years ago


I've solved this error by removing waves.js and bs-custom-file-input.js code from mdb.js and added those js individually for a temporary solution and it works fine for me.


Marta Wierzbicka staff commented 3 years ago

Hi,

I'm glad you solved this.

Best, Marta


mschares free answered 4 years ago


We are using version 4.5.14 and still have this issue. Any update on when it will be fixed?


Bartłomiej Malanowski staff commented 4 years ago

This issue is still on our bug list 


sinanc premium answered 4 years ago


Hello Guys, I need to use mdb with RequireJS, too. I downloaded the latest version (MDB PRO 4.5.5) and I still have the problems above. You have mentioned that you will fix it already with 4.4.0. I need a real fix, since this prevents me using the components requiring javascript. Thanks in advance Sinan Can

chimericdream pro answered 5 years ago


We’ll try to fix it with MDB 4.4.0
That's great to hear. I don't know whether you have any way for people to contribute, but I'd be willing to pitch in if it will help speed things along.

We'll try to fix it with MDB 4.4.0

chimericdream pro answered 5 years ago


We do not support action with RequireJS. We are planning on doing so in the next version.
This will help me immensely. Do you have any idea on an ETA for the next release? Also, (just so I'm clear) are you meaning the next update to MDB4, or a future MDB5 release?

devtrix pro answered 5 years ago


Awesome, thanks!

Mirosław Stasiak free answered 5 years ago


Hi Raj, We do not support action with RequireJS. We are planning on doing so in the next version. Here you have a temporary solution: This is how a file structure should look like
  • project-directory/
    • project.html
    • scripts/
      • main.js
      • require.js
      • bootstrap.js
      • helper.js
      • jquery-3.1.1.js
      • mdb.js
      • tether-g.js
Here's the code for main.js
requirejs.config({
    shim : {
        bootstrap : {
            deps : [ 'jquery', 'tether-g'],
            exports: 'Bootstrap'
        },
        mdb : {
            deps : [ 'jquery', 'bootstrap'],
            exports: 'mdb'
        },
        helper : {
            deps : [ 'mdb'],
            exports: 'helper'
        }
    },

    paths: { 
        'jquery': ['jquery-3.1.1'],
        'tether-g': ['tether-g'],
        'bootstrap': ['bootstrap'],
        'mdb': ['mdb'],
        'helper': ['helper']

    }
});

requirejs([ 'bootstrap', 'jquery', 'helper', 'mdb','tether-g'],
            function() {
                console.log("Loaded requirejs:)");    
    return {};

});
Here fix for teather. Save it in the tether-g.js
define(['tether'], function(tether) {
    window.Tether = tether;
    return tether;
});
https://stackoverflow.com/questions/34376118/tooltip-tether-with-requirejs Comment the following code lines in mdb.js
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();//Preloading script
Add the following code line jQuery.fn.pickadate = jQuery.fn.pickadate || {}; in mdb.js before this line $.extend($.fn.pickadate.defaults, { https://github.com/amsul/pickadate.js/issues/742 In the helper.js file, we type all the scripts for the module initialization, for example, new WOW().init(); Regards,

Mirosław Stasiak free answered 5 years ago


Hi Raj, We do not support action with RequireJS. We are planning on doing so in the next version. Here you have a temporary solution: This is how a file structure should look like
  • project-directory/
    • project.html
    • scripts/
      • main.js
      • require.js
      • bootstrap.js
      • helper.js
      • jquery-3.1.1.js
      • mdb.js
      • tether-g.js
Here's the code for main.js
requirejs.config({
    shim : {
        bootstrap : {
            deps : [ 'jquery', 'tether-g'],
            exports: 'Bootstrap'
        },
        mdb : {
            deps : [ 'jquery', 'bootstrap'],
            exports: 'mdb'
        },
        helper : {
            deps : [ 'mdb'],
            exports: 'helper'
        }
    },

    paths: { 
        'jquery': ['jquery-3.1.1'],
        'tether-g': ['tether-g'],
        'bootstrap': ['bootstrap'],
        'mdb': ['mdb'],
        'helper': ['helper']

    }
});

requirejs([ 'bootstrap', 'jquery', 'helper', 'mdb','tether-g'],
            function() {
                console.log("Loaded requirejs:)");    
    return {};

});
Here fix for teather. Save it in the tether-g.js
define(['tether'], function(tether) {
    window.Tether = tether;
    return tether;
});
https://stackoverflow.com/questions/34376118/tooltip-tether-with-requirejs Comment the following code lines in mdb.js
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();//Preloading script
Add the following code line jQuery.fn.pickadate = jQuery.fn.pickadate || {}; in mdb.js before this line $.extend($.fn.pickadate.defaults, { https://github.com/amsul/pickadate.js/issues/742 In the helper.js file, we type all the scripts for the module initialization, for example, new WOW().init(); Regards,

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No