How to add js libraries that require Jquery to magento 2 using requireJs

Question

I am having a bit of strange behaviour with Magento 2 require.

What I trying to do is to use glide.js to load carousel image. I create custom.js and here is my code.

require(['jquery', 'lib/glide'], function($){
    $(function(){
        var carousel = $('#Glide').glide({ //instantiating glide
            type: 'carousel',
            startAt: 1,
            touchDistance: 2,
            autoplay: true,
            animationDuration: 800
        });
    });
});

This kind of works 90% of the time but it's temperamental. sometimes it gives error: Uncaught ReferenceError: jQuery is not defined and Uncaught TypeError: jQuery(...).glide is not a function.

The library needs jquery so it seens that sometimes something goes wrong and it can't find jquery lib.

Does anyone came across this before or I am doing something wrong.

Your help is appreciated. Thank's

Answer 1

I can think of two solutions that should help resolve the issue:

domReady!

Require JS ships with a dom ready plugin, this will ensure your carousel is only loaded when the dom has loaded. To do this add domReady! as a dependency like so:

require(['jquery', 'lib/glide', 'domReady!'], function($){
    ...
});

Map glide

If the above solution doesn't work I would set Glide up via a Require JS config like this:

Create app/design/frontend/VENDOR/THEME/requirejs-config.js

var config = {
    "map": {
        "*": {
            "glide": "lib/glide",
        }
    },
};

Then change the dependency to glide and include the domReady! from before.

require(['jquery', 'glide', 'domReady!'], function($, glide){
    $(function(){
        var carousel = $('#Glide').glide({
            type: 'carousel',
            startAt: 1,
            touchDistance: 2,
            autoplay: true,
            animationDuration: 800
        });
    });
});

Answer 2

It sometimes give that error because there is'nt in your code a dependency between jquery and glide, the order of the dependencies in the array does'nt affect the loading order of the libraries at all.

You have to use the shim configuration.

Write in YOUR-VENDOR/YOUR-THEME/requirejs-config.js (If you don't have this file, just create it):

shim: { 
   'lib/glide': { 
       deps: ['jquery'] 
   }
}

This syntax tells require that glide depends from jquery