dependency errors when optimising requirejs application using grunt

Question

I'm trying to minify my requirejs application using grunt it outputs all the files minified and my main.js gets all the used scripts etc ... i run grunt from at the level where the public folder is defined

but when i try to run the optimized main js file it doesn't work and says Backbone is not defined for my 'kinvey' module.. (//da189i1jfloii.cloudfront.net/js/kinvey-backbone-1.1.6.min.js) please help i searched for hours and it doesn't work!

directory layout:

public
 - js
  - libs (all libraries i use)
  - folders / containing modules
  - main.js
  - app.js
 - img ...

main.js:

require.config
(
    {
        paths : {
            'jquery' : 'libs/jquery-1.10.1.min',
            'backbone' : 'libs/backbone.min', // -1.1.2 amd
            'underscore' : 'libs/underscore-1.6.0.min',
            'kinvey' : 'libs/kinvey-backbone-1.1.6.min' // amd
        },
        shim : {
            'underscore' : {
                exports : '_'
            },
            'backbone' : {
                exports : 'Backbone',
                deps : ['jquery','underscore']
            },
            'kinvey' : {
                deps: ['backbone','underscore'],
                //exports: 'Kinvey',
            }
        },
        //deps : ['jquery','underscore']            
    }
);

require
(
    ['backbone', 'kinvey', 'app'],
    function(Backbone, Kinvey, Application)
    {
        'use strict';

        var init = Kinvey.init({ appKey: '...', appSecret : '..'});

        init.then(function(activeUser)
        {       
            if (!activeUser)
            {
                window.location = '/login';
            }
            else
            {
                Application.start();
            }
        }, function(error) {
            alert("Something went wrong.. Please try again.");
            window.location = '/home';
        });     
    }
);

grunt file contains:

                mainConfigFile: "public/js/main.js",
                modules: [
                    {
                        name: 'main',
                     include: ['backbone',
              'kinvey',
              'app']
          }
                ],
                //name: "libs/almond", // node_modules/almond/almond.js
                //wrap: true,
                optimize : 'none',
                dir: "release",

for some reason the output file contains the backbone module and then beneath that the kinvey code.. but for some reason when the kinvey code is run Backbone does not exist, but it needs to because it depends on it (like i did in the config).

It does work fine when not optimized!

Please help me i'm clueless..

Louis Louis · Accepted Answer · 2014-03-03T17:38:30

You have notes in your configuration that say "amd" next to your Backbone path and next to your path for Kinvey. AMD-style modules do not need shims. (And a quick check of the code of Backbone 1.1.2 and Kinvey 1.1.6 shows they both call define and thus are AMD-style modules.)

The presence of needless shims very often does not cause immediate problems. So you could have code that works with needless shims when the code is not optimized but fails when it is optimized. Or, to take a completely different example, code that works on Chrome but fails on IE8. And so on and so forth, ...

Edit: Ok, so you point out (correctly) that Kinvey does not list Backbone among its dependencies. That's probably because that version of Kinvey still expects an older version of Backbone, before Backbone was modified for AMD support. You've got multiple options here:

Use an old version of Backbone that is not AMD-compliant. You'll need a shim for it. (Kinvey still gets no shim.)

Deliberately export Backbone to the global space. You could modify the code after your call to require.config in your main.js file like this:

require(['backbone'], function (Backbone) {
    window.Backbone = Backbone;
    require(['kinvey', 'app'], function(Kinvey, Application) {
        'use strict';

        var init = Kinvey.init({ appKey: '...', appSecret : '..'});
        // Etc. Same code as you originally had.
    });
});

This loads backbone before kinvey is loaded, and exports it to the global space. Kinvey should then be able to find it.

dependency errors when optimising requirejs application using grunt

2 Answers