Proper structure for using with RequireJs -- Urgent


Topic: Proper structure for using with RequireJs -- Urgent

devtrix pro premium priority 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 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 Szymanska staff pro premium commented 3 years ago

Hi,

I'm glad you solved this.

Best, Marta


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,
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,

devtrix pro premium priority answered 5 years ago

Awesome, thanks!

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?

Bartłomiej Malanowski staff pro premium answered 5 years ago

We'll try to fix it with MDB 4.4.0

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.

sinanc pro 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

mschares 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 pro premium commented 4 years ago

This issue is still on our bug list 


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
Tags