Uncaught reference error - is not defined - Magento 2

Question

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

Answer 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.