RequireJS dependency undefined in callback method

Question

I started to use RequireJS, the dependency loads fine but in the callback method all dependencies are undefined.

require.config({
    baseUrl: 'js',
    paths: {
        angular: '../lib/angular/angular',
        myApp: 'app',
        states: 'app-states',
        controllers: 'controllers',
        filters: 'filters',
        services: 'services',
        oauth2: 'oauth2'
        //async: 'lib/require/async'
    },
    shim: {
        'myApp': {
            deps: ['angular']
        },
        'states' : {
            deps: ['angular', 'myApp']
        },
        'controllers': {
            deps: ['angular', 'myApp']
        },
        'filters': {
            deps: ['angular', 'myApp']
        },
        'services': {
            deps: ['angular', 'myApp']
        }       
    }
});

require(['angular', 'myApp', 'states', 'controllers', 'filters', 'services'], function(angular, myApp, states, controllers, filters, services) {
    'use strict';
    console.log('requireJs done');
    console.log(angular);
    console.log(myApp);
    angular.bootstrap(document, ['myapp']);
});

If I just require angular, the callback method is not called. I was wondering why.

require(['angular', function(angular) {
    console.log("requireJS done");
}]);

Ben McCormick · Accepted Answer · 2013-08-05 18:17:13Z

2

You're not exporting any values from those libraries. For shims you need to specify the variable to be exported before you can reference them. Since you're not exporting anything, the variables are set to null.

Exporting looks like this:

shim: {
    "angular": {
        exports: "angular"
    }
}

AMD/Requirejs works by pulling a value out of the files that it loads and setting that to the named argument in the callback function. For normal AMD files, thats whatever the return value of the function passed to define is, or the object within define. But for shims, you need to pick a variable, usually the namespace of the libary. That allows you to simulate AMD for namespace based libaries

You can see the documentation section on shims for more details.

answered Aug 5, 2013 at 18:17

Ben McCormick

25.8k12 gold badges56 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simon Smith · Accepted Answer · 2013-08-05 09:23:28Z

1

Your syntax is wrong, the array of dependencies should the be the first argument.

Try

require(['angular'], function(angular) {
    console.log("requireJS done");
});

answered Aug 5, 2013 at 9:23

Simon Smith

8,0442 gold badges32 silver badges40 bronze badges

1 Comment

Sydney Over a year ago

You're right but after fixing the syntax, console.log(angular) still returns undefined in the callback.

Sydney · Accepted Answer · 2013-08-05 18:13:37Z

0

I had to export some library, to be available in my callback.

shim: {
    'angular': {
        exports: 'angular'
    }
}

answered Aug 5, 2013 at 18:13

Sydney

12.3k21 gold badges94 silver badges146 bronze badges

Collectives™ on Stack Overflow

RequireJS dependency undefined in callback method

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related