Unable to load required js file for my code using requirejs

Question

Inside my main.js file:

define(['require'], function(require) {
    require([
        '../libs/requirejs/plugins/domReady',
        '../core',
        '../ndn.2',
        '../Ndn/Widget'
    ],
    function(domReady) {
        // require('../Ndn/Widget'); // I tried this too, but it doesn't solve my problem

        console.log('Should have required everything...');

        domReady(function() {
            console.log('About to call init()');

            init();
        });
    }
)});

function init() {
    // Begin fetching this widget's delivery settings
    Ndn_Widget.fetchDeliverySettings();

    // ... Other code here ...
}

In my Ndn/Widget.js file, I have the following:

var Ndn_Widget;

define(['require'], function(require) {
    require(['../ndn.2', './ServerInterface'], function() {
        /**
         * An associative array for the different delivery settings
         * @var Object
         */
        var deliverySettings = {};

        Ndn_Widget = {
            fetchDeliverySettings: function() {
                // ... code here
                console.log('Finished defining Ndn_Widget.');
            }
        };
    });
});

I am expecting that the anonymous function I pass to the define() function inside of main.js would only be executed after the "../Ndn/Widget.js" file has been loaded, but this is not always the case.

This is an example of my console.log statements:

Should have required everything...
About to call init()
Uncaught TypeError: Cannot call method 'fetchDeliverySettings' of undefined 
Just finished defining Ndn_Widget.

Can someone tell me what I'm doing wrong? Thank you in advance!

Simon Smith · Accepted Answer · 2013-03-28 00:10:03Z

2

It looks like you're using the concept of require and define incorrectly.

No need to define variables outside of your modules. Things should be returned from modules, not modified outside of them.
Use define as it sounds, to define a chunk of code that serves a purpose. Think of these as your Classes if it helps
Use require to grab your modules and get them to interact.

I've re-written your example to demonstrate

main.js

require([
    '../libs/requirejs/plugins/domReady',
    '../Ndn/Widget',
    '../core'
], function(domReady, Ndn_Widget) {

    domReady(function() {
        Ndn_Widget.fetchDeliverySettings();
    });

});

Ndn/Widget.js

define(function(require) {
    require('../ndn.2');
    require('./ServerInterface');

    var deliverySettings = {};

    return {
        fetchDeliverySettings: function() {

        }
    };
});

If your other dependencies aren't AMD modules, and you depend on their return values then you may need to use the shim configuration option as well.

I would encourage you to re-read the API docs on module definitions as well.

edited Mar 28, 2013 at 0:10

answered Mar 27, 2013 at 19:31

Simon Smith

8,0442 gold badges32 silver badges40 bronze badges

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

7 Comments

Paul Grime Over a year ago

I'm not sure about using require('...') without a callback. I would imagine this is usually not what you want.

Simon Smith Over a year ago

I'm not, it's just the sugar syntax - requirejs.org/docs/whyamd.html#sugar

Paul Grime Over a year ago

Ah ok. Nice tip. It seemed a bit weird coming from my purely AMD background. Upvoted!

Steven Over a year ago

The new code for Ndn/Widget.js gives the following error: Uncaught Error: Module name "../ndn.2" has not been loaded yet for context: _

Simon Smith Over a year ago

You could probably remove it from main.js to be sure. Adjusted my code to reflect. It's also tricky as I'm not certain what ndn.2 is in this case.

|

Steven · Accepted Answer · 2014-07-28 19:47:26Z

While interacting with the global scope is reasonably frowned upon when using AMD, it is still doable.

I was requiring the ../Ndn/Widget module and incorrectly expected its nested require() logic (shown below) to be executed synchronously:

require(['../ndn.2', './ServerInterface'], function() {

The above logic however only executes asynchronously (as "Asynchronous Module Definition" suggests). The following code within the main module...

    Ndn_Widget.fetchDeliverySettings();

was being executed without knowing if the nested require() logic had been executed yet within the ../Ndn/Widget module.

One solution to fix this would be to introduce a new module that can be referred to by both modules, for example say an app module, that triggers an event to let the other module know that the global Ndn_Widget variable is now defined.

Updated main.js file:

define(['require', 'app'], function(require, app) {
    require([
        '../libs/requirejs/plugins/domReady',
        '../core',
        '../ndn.2',
        '../Ndn/Widget'
    ],
    function(domReady) {
        console.log('Should have required everything...');

        app.on('ready', function() { // domReady(function() {
            console.log('About to call init()');

            init();
        });
    }
)});

function init() {
    // Begin fetching this widget's delivery settings
    Ndn_Widget.fetchDeliverySettings();

    // ... Other code here ...
}

Updated Ndn/Widget.js file:

var Ndn_Widget;

define(['app', 'require'], function(require, app) {
    require(['../ndn.2', './ServerInterface'], function() {
        /**
         * An associative array for the different delivery settings
         * @var Object
         */
        var deliverySettings = {};

        Ndn_Widget = {
            fetchDeliverySettings: function() {
                // ... code here
                console.log('Finished defining Ndn_Widget.');
            }
        };

        app.trigger('ready');
    });
});

Collectives™ on Stack Overflow

Unable to load required js file for my code using requirejs

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related