Proper structure for using with RequireJs -- Urgent

bhavinshah free answered 4 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 4 years ago

Hi,

I'm glad you solved this.

Best, Marta

Add comment

mschares free answered 5 years ago

0 0 Best answer

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

This issue is still on our bug list

Add comment

sinanc premium answered 5 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

chimericdream pro answered 6 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

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

We'll try to fix it with MDB 4.4.0

Add comment

chimericdream pro answered 6 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

devtrix pro answered 6 years ago

0 0 Best answer

Awesome, thanks!

Add comment

Mirosław Stasiak free answered 6 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
<ul>
    <li>project-directory/
    <ul>
        <li>project.html</li>
        <li>scripts/
        <ul>
            <li>main.js</li>
            <li>require.js</li>
            <li>bootstrap.js</li>
            <li>helper.js</li>
            <li>jquery-3.1.1.js</li>
            <li>mdb.js</li>
            <li>tether-g.js</li>
        </ul></li>
    </ul></li>
</ul>

Here's the code for main.js
<pre><code>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 {};

});</code></pre>

Here fix for teather. Save it in the tether-g.js 
<pre><code>define(['tether'], function(tether) {
    window.Tether = tether;
    return tether;
});</code></pre>

https://stackoverflow.com/questions/34376118/tooltip-tether-with-requirejs

Comment the following code lines in mdb.js
<pre><code>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</code></pre>

Add  the following code line <code>jQuery.fn.pickadate = jQuery.fn.pickadate || {};</code> in mdb.js before this line <code>$.extend($.fn.pickadate.defaults, {</code>
https://github.com/amsul/pickadate.js/issues/742

In the helper.js file, we type all the scripts for the module initialization, for example,
<code>new WOW().init();</code>

Regards,

Please insert min. 20 characters.

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 free answered 6 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
<ul>
    <li>project-directory/
    <ul>
        <li>project.html</li>
        <li>scripts/
        <ul>
            <li>main.js</li>
            <li>require.js</li>
            <li>bootstrap.js</li>
            <li>helper.js</li>
            <li>jquery-3.1.1.js</li>
            <li>mdb.js</li>
            <li>tether-g.js</li>
        </ul></li>
    </ul></li>
</ul>

Here's the code for main.js
<pre><code>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 {};

});</code></pre>

Here fix for teather. Save it in the tether-g.js 
<pre><code>define(['tether'], function(tether) {
    window.Tether = tether;
    return tether;
});</code></pre>

https://stackoverflow.com/questions/34376118/tooltip-tether-with-requirejs

Comment the following code lines in mdb.js
<pre><code>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</code></pre>

Add  the following code line <code>jQuery.fn.pickadate = jQuery.fn.pickadate || {};</code> in mdb.js before this line <code>$.extend($.fn.pickadate.defaults, {</code>
https://github.com/amsul/pickadate.js/issues/742

In the helper.js file, we type all the scripts for the module initialization, for example,
<code>new WOW().init();</code>

Regards,

Please insert min. 20 characters.

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