CODEWITHSUNDEEP
jqueryrequirejsiscroll
Mukesh
Mukesh

Reputation: 858

requirejs sometimes does not load the dependent modules and gives error "jQuery" undefined

I am using requirejs in my current project, but sometimes its doesn't load dependency modules and throw error "jQuery" undefined... its not happen always... if i refresh the page then it works fine. I tried increasing waitSeconds but no success.

Here: 

require.config({
    paths: {
        'jquery': 'lib/jquery-1.10.2.min',      
        'async': 'lib/async',
        'slider': 'lib/jquery.bxslider.min',
        'fixed-scroll': 'lib/iscroll',
        'validation': 'validation-framework',
        'main-nav': 'main-nav',
        'global': 'global',     
        'page-animate': 'page-details-animation',
        'details': 'page-details',
        'pageMap': 'map'
    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'details': {
            deps: ['jquery']
        },
        'page-animate': {
            deps: ['jquery'],
            exports: 'pageAnimate.init'
        },
        'slider': {
            deps: ['jquery'],
            exports: 'bxSlider'
        },
        'fixed-scroll': {
            exports: 'iScroll'
        },
        'validation': {
            deps: ['jquery']
        }       
    }
});

require(['jquery', 'fixed-scroll', 'page-animate', 'main-nav', 'global', 'details', 'slider', 'pageMap', 'validation'], function () {   
    $('.page-details').pageDetails();   
});

Upvotes: 2

Views: 1468

Answers (1)

Louis
Louis

Reputation: 151401

Judging by the error you report and what I see in the question, I'd suggest that 'details' needs a shim:

shim: {
     [...]
    'details': [ 'jquery' ]
}

I'm inferring this due to $('.page-details').pageDetails(), pageDetails must be provided by a jQuery plugin and that plugin looks like it would be (based on the names used) the modules declared to RequireJS as 'details'. The error you get is consistent with this plugin not being properly shimmed. A jQuery plugin needs jQuery loaded to install itself, hence the need for the dependency.

Other things that are good to know but do not participate in the error:

  • jQuery 1.10.x does not need to be shimmed. It's been true since at least 1.8. Require it as 'jquery' (all lowercase), and you'll be fine.

  • You should use the value of the 'jquery' module instead of relying on the global $. So, don't do:

     require(['jquery', ...], function () {
     $.whatever();
 });

    but have function parameter named $ that corresponds to the 'jquery' module:

    require(['jquery', ...], function ($) {
    $.whatever();
});

If you ever use noConflict or need to support multiple versions of jQuery (which may happen if you use a 3rd party library that needs a specific version), it will make your life easier.

Upvotes: 3

Related Questions