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: _
.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

Now I know this question has been asked a million times before, but I still couldn't figure it out.

===========================

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/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?

Note: I'm using RequireJS v.2.1.10

Share Improve this question edited Jan 29, 2014 at 1:41 asked Jan 29, 2014 at 1:36 Katie 48.3k19 gold badges102 silver badges129 bronze badges

2 There's nothing in the code shown in the question which explains why you'd get "... has not been loaded yet for context". I've read the code of RequireJS and see that the only kind of situation in which this error is raised is if a call like var foo = require("...") (that is, a require call with a single string argument) occurs before the module required is loaded. – Louis Commented Jan 30, 2014 at 0:41
huh. Well that's lame :( I always make sure to have the module in the header if I'm using require("blah") in the code, I've double and triple checked all my files :( idk what it is – Katie Commented Jan 30, 2014 at 1:09

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

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 e after the ending round bracket of the function in the same line.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

Current Code

Problem

Current Fixes

Fix #1 - Using require('');

Fix #2 - Using require([''],function(){});

Failed Attempts #1

Ideas?

Current Code

Problem

Current Fixes

Fix #1 - Using require('');

Fix #2 - Using require([''],function(){});

Failed Attempts #1

Ideas?

1 Answer 1

与本文相关的文章

评论列表(0)