Add jquery dependant js via module

Question

I am trying to add a jquery based module to magento 2 via a module. But I keep getting these errors:

ma5menumin.js:1 Uncaught ReferenceError: $ is not defined
at ma5menumin.js:1

callma5.js:1 Uncaught ReferenceError: define is not defined
at callma5.js:1

I think something is wrong with the requirejs-config file but it's a first timer for me, so i'm not sure what to do.

This is the require-js file:

var config = {
map: {
    '*': {
        "mobilemenu.mobmenu": "Vendor_Module/ma5menumin",
        "mobilemenu.callmenu": "Vendor_Module/callma5"
    }
}
};

I also tried this require-js:

var config = {
paths: {
    "mobilemenu.mobmenu": "Vendor_Module/ma5menumin",
    "mobilemenu.callmenu": "Vendor_Module/callma5"
},
shim: {
    'mobilemenu.mobmenu': {
        'deps': ['jquery']
    },
    'mobilemenu.callmenu': {
        'deps': ['jquery']
    }
}
};

This is my callma5.js script:

define(["jquery"], function($){
    ma5menu({
        position: 'left',
        closeOnBodyClick: true
    });
});

I also tried this callma5.js:

require([
    "jquery"
], function ($) {
    //<![CDATA[
    $(document).ready(function () {
        ma5menu({
            position: 'left',
            closeOnBodyClick: true
        });
    });
    //]]>
});

The ma5menumin file is minified jquery. How can I load these files after jquery is loaded?

Answer 1

Firstly, you do not need shim for your script. Shim is used if you require some vendor library which already expects another library. In your case you are building up a script and explicitly inject jquery lib so it will be always loaded before your script will be executed.

Secondly, in your case you should use path rather than map. Path will allow you to define shorthand path to your resource, so you can call it by short name rather that full and often long name.

So your requirejs-config.js should look like:

config = {
paths: {
    "mobilemenu.mobmenu": "Vendor_Module/ma5menumin",
    "mobilemenu.callmenu": "Vendor_Module/callma5"
},

With regards to your script, use define instead of require, you are creating module in the end:

define(["jquery"], function($){
    ma5menu({
        position: 'left',
        closeOnBodyClick: true
    });
});

This code in its structure is ok but it will not work. ma5menu is a function and you must declare it or require from another requirejs module.