CODEWITHSUNDEEP
javascriptjqueryrequirejs
rutruth
rutruth

Reputation: 790

How to properly define shim config with requirejs

I have jQuery and a jQuery plugin loaded via RequireJS.

This is how my requirejs.config looks like:

requirejs.config({
baseUrl: "http://mysite.example.com",
"paths": {

    // libraries
    "jquery": "Static/js/library/jquery/jquery-1.10.2",
    "jquery_sortable" : "Static/js/library/jquery-sortable/jquery-sortable",

    shim: {
        'jquery_sortable': ['jquery']
    }
}
});

When I refresh the page two times or more very quickly, sometimes I get an exception in the plugin code that:

Uncaught ReferenceError: jQuery is not defined.

Basically, my plugin does not use the shim I have set for it.

What is the most reliable way to specify my shim config ??

Upvotes: 0

Views: 903

Answers (3)

ilpaijin
ilpaijin

Reputation: 3695

Could be because you were not constructing as expected. As you notice you were putting shim inside paths. May be.

"paths": {

// libraries
"jquery": "Static/js/library/jquery/jquery-1.10.2",
"jquery_sortable" : "Static/js/library/jquery-sortable/jquery-sortable",

shim: {
    'jquery_sortable': ['jquery']
}

}

-------EDIT AFTER COMMENT------

Maybe trying to define the dep as declared in the manual? 

'foo': {
    deps: ['bar'],
    ...

source: http://requirejs.org/docs/api.html#config-shim

Upvotes: 3

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40296

I feel that this occurs because RequireJS is loading scripts asynchronously. This happens for performance reasons, i.e. scripts will be loaded in parallel. This is OK for normal AMD modules; RequireJS will keep the dependency tree from the define(["deps"], function(){...}) calls but will defer the execution of function() until its dependencies are resolved.

However with non-AMD, shimmed modules (like jQuery-UI), the entire script will be executed on load. This means that, if by any chance the "sortable" is loaded before "jquery", it will not find its dependency and fail as you write.

I believe the only robust workaround is to include jQuery as a plain old <script> tag, right after require.js. This way you cannot use the data-main attribute to load your entry point, you will have to require it separately:

<script src="scripts/lib/requirejs/require.js"></script>
<script src="scripts/lib/jquery/jquery.js"></script>
<script>
    require(["app/bootstrap"]);
</script>

Upvotes: 0

rutruth
rutruth

Reputation: 790

It's weird because all the examples I have seen online put the shim config at the last bit of the requirejs.config but putting it at the top seemed to solve MY problem.

requirejs.config({
    baseUrl: "http://mysite.example.com",
    shim: {
            'jquery_sortable': ['jquery']
        },
    "paths": {

        // libraries
        "jquery": "Static/js/library/jquery/jquery-1.10.2",
        "jquery_sortable" : "Static/js/library/jquery-sortable/jquery-sortable"

    }
});

Upvotes: 1

Related Questions