2

I've been reading up on requirejs for Magento 2 and I've used it sucessfully for some scripts but I'm having trouble with one called Lity.

I have my requirejs-config.js file setup as follows:

var config = {
deps: [
    "js/main",
],

map: {
    '*': {
        'lityLightbox': 'js/lity',
    }
},
"shim": {
    "lityLightbox": ["jquery"],
}
};

and my main.js contains the following:

require(['jquery', 'lityLightbox'],
function ($, lityLightbox) {
    "use strict";
    $(document).ready(function ($) {
        $(document).on('click', '[data-lightbox]', lity);
    });
});

However I get the following console error: Uncaught ReferenceError: lity is not defined but yet the script still works but only sometimes?

How can I sort out the console error please? Is it anything to do with the order that the scripts are loaded?

Update

After passing the reference correctly I now have a different error

Uncaught Error: Mismatched anonymous define() module: function ($) { return factory(window, $); }'

This is on the first line of the lity.js file

I have this entire script wrapped in require(['jquery', 'lityLightbox'], function($){ *** });

Are you able to help wth that too please

  • try with $(document).on('click', '[data-lightbox]', lityLightbox); – Rakesh Jesadiya Dec 1 '17 at 9:06
  • Omg I knew it would be something so stupidly simple. Can't believe I missed that, thank you mate. – Ordog Dec 1 '17 at 9:08
1

You need to pass your object in your function as lityLightbox.

You have passed lity instead of lityLightbox.

require(['jquery', 'lityLightbox'],
function ($, lityLightbox) {
    "use strict";
    $(document).ready(function ($) {
        $(document).on('click', '[data-lightbox]', lityLightbox);
    });
});

Update

var config = {
    deps: [
        "js/main",
    ],
    paths: {
        'lityLightbox': 'js/lity',      
    },
    "shim": {
        "lityLightbox": ["jquery"],
    }
};

Run deployment command.

| improve this answer | |
  • Sorry to bring this back up again but I have a different error now. I've updated my question above with the details. Are you able to help with that too please? – Ordog Dec 1 '17 at 10:55
  • Hmm that seems to have messed up the paths for my scripts. It is now trying to get them all from the theme root instead of theme_name/web/js/ What is the difference between paths and map? – Ordog Dec 1 '17 at 11:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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