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

Improve this question

2 Answers 2

Reset to default
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 }); }); });
Improve this answer
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'] } } }; Commented 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. Commented 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. Commented 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

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.