RequireJS: Module name __ has not been loaded yet for context, but only for SOME, not all

amd, javascript, js-amd, requirejs

Solution

Answer to failed attempt #1

define(['require', 'TestModel', 'TestView', 'SocketLogic', 'Logger', 'TestPanelView'], 
function (require, testModel, testView, socketLogic, logger, testPanelView) {
    var firstMethod = function() {
             testModel.doSomething();
             testView.doSomethingElse();
             socketLogic.andAnother();
             logger.log("hi");
             testPanelView.updateSomething();
             this.anotherMethod();
    };
    var anotherMethod = function(){
        console.log("hello");
    }
 return {
    firstMethod: firstMethod,
    anotherMethod: anotherMethod
});

And don't forget, the opening curly bracket must come after the ending round bracket of the function in the same line.

Problem

Now I know this question has been asked a million times before, but I still couldn't figure it out. I have a huge amount of "defines" in various files. Most the time, this works, but a few of my modules are "not loaded for context" sometimes, even-though I put their names in the "define" statement. =========================== Current Code index.js (Simplified for StackOverflow) ``` require.config({ baseUrl: '', paths: { //TOOLS jquery: '../libraries/jquery-1.10.2.min', socketio:'socket.io/socket.io', jqueryLightBox:'../libraries/jquery.lightbox_me', jqueryMigrate:'../libraries/jquery-migrate-1.2.1', jqueryUI:'../libraries/jquery-ui-1.10.3.custom.min', spinner:'../libraries/jquery.spin', jQueryFormPlugin:'../libraries/jquery.form.min', jQueryCookiePlugin:'../libraries/jquery.cookie', json2:'../libraries/json2', raphael:'../libraries/raphael-min', raphaelPanZoom:'../libraries/raphael.pan-zoom.min', bootstrap: '../libraries/bootstrap.min', browserDetection: '../libraries/BrowserDetect', qtip: '../libraries/jquery.qtip.min', imagesloaded: '../libraries/imagesloaded.pkgd.min', eventie: '../libraries/eventie', eventEmitter: '../libraries/EventEmitter.min', underscore: '../libraries/underscore-min', underscoreString: '../libraries/underscore.string.min', stacktrace: '../libraries/stacktrace', elapseMeMin: '../libraries/elapseMe.min', jqueryKeithWood: '../libraries/jquery.svg.min', domReady: '../libraries/domReady', //PAGES: (Simplified for StackOverflow) TestView: '../javascripts/tests/TestView', TestModel: '../javascripts/tests/TestModel', TestController: '../javascripts/tests/TestController', TestPanelView: '../javascripts/tests/Test-StartPanelView', SocketLogic: '../javascripts/SocketLogic', Logger: '../javascripts/Logger', }, shim: { 'socketio': { exports: 'io' }, 'spinner': { exports: 'Spinner', deps: ['jquery'] }, 'raphael': { exports: 'Raphael', deps: ['jquery'] }, 'raphaelPanZoom': { deps: ['raphael'] }, 'bootstrap': {}, 'browserDetection': { exports: 'BrowserDetect' }, 'underscore': { exports: '_' }, 'underscoreString': { deps: ['underscore'], exports: '_' }, 'stacktrace': { exports: 'printStackTrace' }, 'elapseMeMin': { exports: 'elapseMe', deps: ['jquery'] } } }); ////////////////// //1) Everything starts with this method. Will execute when the DOM is ready. ///////////////// require(['domReady'], function (domReady) { domReady(function () { //This function is called once the DOM is ready. //It will be safe to query the DOM and manipulate //DOM nodes in this function. //Start Loading! require(['TestController'], function(TestController) { TestController.firstMethod(); }); }); }); ``` TestController.js (Simplified for StackOverflow) ``` define(['TestModel', 'TestView', 'SocketLogic', 'Logger', 'TestPanelView'], function (TestModel, TestView, socketLogic, Logger, TestPanelView) { return { firstMethod: function() { TestModel.doSomething(); TestView.doSomethingElse(); socketLogic.andAnother(); Logger.log("hi"); TestPanelView.updateSomething(); this.anotherMethod(); }, anotherMethod: function() { console.log("hello"); } } }); ``` =========================== Problem But, once in a while, I'll randomly get just one of them to "not be loaded for context", eventhough the rest were just fine: ``` Uncaught Error: Module name "TestPanelView" has not been loaded yet for context: _ http://requirejs.org/docs/errors.html#notloaded ``` =========================== Current Fixes Fix #1 - Using require(''); Instead of ``` TestPanelView.updateSomething(); ``` I have been doing: ``` var testPanelView = require('TestPanelView'); testPanelView.updateSomething(); ``` Which works, BUT.. shouldn't it have already been loaded into context since I put it in the header? Why this one? It's the same as all the others! Fix #2 - Using require([''],function(){}); This also works, but again I'm just doing this one by one and it feels wrong! Instead of ``` TestPanelView.updateSomething(); ``` Sometimes I do this: ``` require(['TestPanelView'], function(testPanelView){ testPanelView.updateSomething(); }); ``` Failed Attempts #1 TestController.js (Simplified for StackOverflow) ``` define(['require', 'TestModel', 'TestView', 'SocketLogic', 'Logger', 'TestPanelView'], function (require) { var TestModel = require('TestModel') var TestView = require('TestView'); var SocketLogic = require('SocketLogic'); var Logger = require('Logger'); var TestPanelView = require('TestPanelView'); return { firstMethod: function() { TestModel.doSomething(); TestView.doSomethingElse(); SocketLogic.andAnother(); Logger.log("hi"); TestPanelView.updateSomething(); this.anotherMethod(); }, anotherMethod: function() { console.log("hello"); } } }); ``` Here I get the "not loaded for context" error again, but this time for all of them. =========================== Ideas? I've been manually patching each one that I find like this, which is not happening to all, only some here and there, which feels like monkey patching... I'd like to know what I'm doing wrong here :( Anyone know? Note: I'm using RequireJS v.2.1.10

Original source