10

I'm developing a module for Magento2 and I'm using requirejs to load custom javascript that depend on jquery. I'm using the shim option in requirejs-config.js to set this dependency between the custom scripts and jquery. The issue is that this dependency is not (always) set. Sometimes jQuery does load before the script and all is fine but sometimes it loads after the scripts resulting in a script error:

Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery.easing.1.3.js:39
Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery.flexslider-min.js:5
Uncaught TypeError: $(...).flexslider is not a function

See below an example of my requirejs-config.js:

var config = {
    map: {
        '*': {
            'flexslider': 'Vendor_Modulejs/jquery.flexslider-min',
            'picturefill': 'Vendor_Modulejs/picturefill.min',
            'easing': 'Vendor_Modulejs/jquery.easing.1.3',
            'hoverintent': 'Vendor_Modulejs/jquery.hoverIntent',
            'fitvids': 'Vendor_Modulejs/jquery.fitvids',
            'vimeo': 'Vendor_Modulejs/jquery.vimeo.api.min'
        }
    },
    shim: {
        'flexslider': ['jquery'],
        'picturefill': ['jquery'],
        'easing': ['jquery'],
        'hoverintent': ['jquery'],
        'fitvids': ['jquery'],
        'vimeo': ['jquery']
    }
};

This is the javascript in my phtml file:

require(['jquery', 'domReady!', 'picturefill', 'flexslider', 'easing', 'hoverintent', 'fitvids', 'vimeo'], function($) {
    "use strict";

    // javascript here

});

What am I doing wrong here, why isnt the shim option honored and is jQuery not always loaded before the other scripts.

18

You have to set requirejs-config.js like below,

More details, Refer link, How to Resolve RequireJs error in Magento 2

 var config = {
        paths: {
                'flexslider': 'Vendor_Modulejs/jquery.flexslider-min',
                'picturefill': 'Vendor_Modulejs/picturefill.min',
                'easing': 'Vendor_Modulejs/jquery.easing.1.3',
                'hoverintent': 'Vendor_Modulejs/jquery.hoverIntent',
                'fitvids': 'Vendor_Modulejs/jquery.fitvids',
                'vimeo': 'Vendor_Modulejs/jquery.vimeo.api.min'
        },
        shim: {
                'flexslider': {
                    deps: ['jquery']
                },
                'picturefill': {
                    deps: ['jquery']
                },
                'easing': {
                    deps: ['jquery']
                },
                'hoverintent': {
                    deps: ['jquery']
                },
                'fitvids': {
                    deps: ['jquery']
                },
                'vimeo': {
                    deps: ['jquery']
                }
        }
    };

Use above code and remove var folder and try. Thanks.

  • This seems to do the trick indeed and I have marked this as the answer. I'd like to understand why this works though. Is it the paths instead of the maps config or is the specific dependency setting in the shim config. The documentation of requirejs mentions you can use an array of dependencies in the shim config instead of specifying each dependency separately. So my guess is that it's the paths versus maps difference, but why? – Solide Feb 17 '16 at 8:44
  • 2
    you can check reference from this post, stackoverflow.com/questions/19216580/requirejs-paths-vs-map – Rakesh Jesadiya Feb 17 '16 at 8:47
  • 1
    Never delete /var as it contains useful information – Max Feb 10 '17 at 22:16
  • Hi Rakesh, Can you explain how the above code works – Jaisa Dec 7 '18 at 10:02
  • @Jaisa, I have elaborate more in my blog in given above link – Rakesh Jesadiya Dec 7 '18 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.