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
 });
 });
});

• Juliano Vargas: Hi nuovecode and Ben. Thanks for your inputs that really helped me move on and so far it's working as expected. in case anyone looks for something similar this is the final code that works. var config = { "map": { "*": { "glide": "lib/glide" } }, shim: { 'lib/glide': { deps: ['jquery'] } } }
• Ben Crook: Glad we could help, if one of the answers did solve it please mark it as accepted. Or if they didn't then please answer it yourself and mark it as answered, it helps people find the fix.
• nuovecode: Hi Juliano. Just a "cosmetic" note: with "map" config you tells that the path lib/glide corresponds to a module named "glide". ok? So when you use shim config you can write just: shim: { 'glide': { deps: ['jquery'] } } }; Hope it helps.

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