1

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?

1 Answer 1

0

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.

1
  • Okay, I changed the files. callma5 file is triggering the ma5menumin script. So my callma5 scripts depends on ma5menumin. How can I add the ma5menumin to the callma5 dependency's?
    – Senta
    Dec 8, 2017 at 8:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.