requirejs jquery multiple dependent non module jquery plugins like jquery-ui and jqGrid

Question

I am not able to order the non AMD modules with shim config.

My shim config is like this. Even if I wanted to use require-jquery.js but still two non AMD modules will be jquery ui and jqGrid. jqGrid itself has a few plugins which must be loaded only when jqGrid has been loaded.

requireconfig.js

require.config({
    baseUrl: '../jsp',
    paths: {
        app: '../js/app',
        jquerygrid: 'http://view.jqueryui.com/grid',
        lib: '../js/lib',
        plugins: '../js/plugins',
        jquery: '../js/lib/jquery-1.9.1',
        jqueryui: [ 'http://ajax.googleapis.com/ajax/libs/jqueryui/'+
            '1.9.2/jquery-ui'],
        canjs:  'http://canjs.us/release/latest/can.view.mustache',
        uigrid:'../js/plugins/mydataview',
        jqgrid: '../js/plugins/grid.locale-en'
    },
    shim: {
        jqueryui: {
            exports: "$",
            deps: ['jquery']
        },
        uigrid: {

            deps:[
             'jqueryui',    
             'http://view.jqueryui.com/grid/ui/jquery.ui.dataview.js',
             'http://view.jqueryui.com/grid/ui/jquery.ui.grid.js',
             'http://view.jqueryui.com/grid/ui/jquery.ui.observable.js',
             'http://view.jqueryui.com/grid/ui/jquery.ui.dataviewlocal.js',
             'http://view.jqueryui.com/grid/grid-spf/pager.js',
             'http://view.jqueryui.com/grid/grid-editing/grid.selectable.js',
             'http://view.jqueryui.com/grid/grid-editing/navigator.js',
             'http://view.jqueryui.com/grid/grid-editing/localstore.js',
             'http://view.jqueryui.com/grid/grid-editing/helpers.js',
             'http://view.jqueryui.com/grid/external/jquery.tmpl.js',
             'http://view.jqueryui.com/grid/grid-spf/grid-filter.js',
             'http://view.jqueryui.com/grid/grid-spf/grid-sort.js'
            ]
        },
        canjs:{
            deps: ['jquery','http://canjs.us/release/1.1.4/can.jquery.js']
        },
        jqgrid:['jqueryui','../js/plugins/jquery.jqGrid.src.js']
    }
});

And my calling HTML is

<script type="text/javascript" src="../js/require.js"></script>
<script type="text/javascript" src="../js/requireconfig.js"></script>

<script type="text/javascript">
require(['jqgrid'], function($){
    $("#mygrid").jqGrid({
        pager: "#mygridpager"
    })
});
</script>

In different runs I am getting different errors:

Sometimes :

Uncaught ReferenceError: jQuery is not defined ..... jquery.jqGrid.src.js:3589

An ofcourse this does not give an erro. But it looks like some hack because requirejs does not support order. Nested require calls are also less elegant. May be if there is a requirejs deferred like when().then() like chain can make it look better.

<script type="text/javascript">
require(['jquery'], function(){
    require(['jqgrid'], function(){
        $("#mygrid").jqGrid({
            pager: "#mygridpager"
        });
    });
});
</script>

Paul Grime Paul Grime · Accepted Answer · 2013-03-31T19:45:24

This sample fiddle has no errors when the JS files are loaded by RequireJS.

I think the crux of the problem is the '../js/plugins/jquery.jqGrid.src.js' file is loaded by RequireJS, but RequireJS does not know that this file itself has dependencies. And so when this file is loaded, its dependencies have not been loaded yet.

So you might need to be completely explicit with RequireJS as to which modules are dependent on which other modules. For example add more paths and more shims:

paths:

    jqgridlocale: 'http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en',
    jqgrid: 'http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min'

shims:

    jqgrid:{
        deps:['jqueryui','jqgridlocale']
    },
    jqgridlocale:{
        deps:['jqueryui']
    }

Now RequireJS knows that both jqgrid and jqgridlocale need jqueryui (and thus jquery) to have been loaded first.

I would also explicitly require() jQuery, as you are using it directly. It is more informative when reading the code to see that jQuery is being used directly.

require(['jquery','jqgrid'], function($){
    $("#mygrid").jqGrid({
        pager: "#mygridpager"
    })
});

requirejs jquery multiple dependent non module jquery plugins like jquery-ui and jqGrid

1 Answers