Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 589
Katie Avatar asked Oct 24 '25 17:10

Katie


1 Answers

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.

like image 190
Steven Spyrka Avatar answered Oct 26 '25 07:10

Steven Spyrka



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!