Proper structure for using with RequireJs -- Urgent

Topic: Proper structure for using with RequireJs -- Urgent

devtrix pro asked 7 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

Add comment

bhavinshah answered 5 years ago

1 0 Best answer

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 5 years ago

Hi,

I'm glad you solved this.

Best, Marta

Add comment

Mirosław Stasiak answered 7 years ago

0 0 Best answer

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,

Add comment

Mirosław Stasiak answered 7 years ago

0 0 Best answer

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 comment

devtrix pro answered 7 years ago

0 0 Best answer

Awesome, thanks!

Add comment

chimericdream pro answered 7 years ago

0 0 Best answer

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?

Add comment

Bartłomiej Malanowski staff pro premium answered 7 years ago

0 0 Best answer

We'll try to fix it with MDB 4.4.0

Add comment

chimericdream pro answered 7 years ago

0 0 Best answer

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.

Add comment

sinanc pro premium answered 6 years ago

0 0 Best answer

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

Add comment

mschares answered 6 years ago