5

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

2 Answers 2

9

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
        });
    });
});
3
  • 2
    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'] } } }; Mar 14, 2017 at 9:50
  • 1
    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.
    – Ben Crook
    Mar 14, 2017 at 9:55
  • 2
    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.
    – nuovecode
    Mar 14, 2017 at 15:06
4

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

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.