RubbleFord
RubbleFord

Reputation: 7636

RequireJS loading script file but the passed reference is undefined

I've got the following requireJS config. When trying to reference the package/ImagingX module I always get undefined even though I can see that the script has been loaded in firebug. If I move the js file in question into the baseUrl directory and remove package/ it works as expected.

What am I doing wrong?

window.requirejs.config(
        {
            baseUrl: '/Scripts',
            paths: {
                "jquery": "./jquery-1.7.1.min",
                "jqx": "/Content/Plugins/jqWidgets",
                "package" : "/Scripts/packages"
            },
            urlArgs: "bust=" + (new Date()).getTime(),
            shim : {
                'jqx/jqxcore': ['jquery'],
                'jqx/jqxsplitter': ['jquery','jqx/jqxcore']
            }
        }
    );

    window.require(['jquery', 'layoutManager', 'container', 'package/ImagingX'],
        function ($,lm,container,px) {
            
            px.Focus();

            $(document).ready(function () {
                lm.Init(); // Sets up panes
                container.Init(); //Set up the containers
            });
    });

Update 15/10/2012

I'm getting desperate to solve this issue now, I've stripped everything back to the basics so here is the new main file :

(function () {

    requirejs.config({
        paths: {
            "packages": "packages"
        }
    });

    require([
            'packages/testmodule'
        ],
        function (tm) {
                alert(tm);
    });
    
})();

And the module which is in a sub folder called packages.

define('testmodule',
function () {

    alert("called");
   
    return {
        set : 'rar  '    
    };

});

I can see the script loaded but it never gets executed, hence I never get a reference for it.

enter image description here

Upvotes: 6

Views: 2884

Answers (2)

RubbleFord
RubbleFord

Reputation: 7636

 requirejs.config({
        paths: {
            //"jquery": "./jquery-1.8.2.min",
            //"jqx": "/Content/Plugins/jqWidgets",
            "templates": 'templates',
            "text": "commonRequireJsModules/text",
            "domReady": "commonRequireJsModules/domReady",
            "packages" : 'packages/'
            //'signalR': './jquery.signalR-0.5.3.min',
            //'knockout': './knockout-2.1.0',
            //'pubsub' : './pubsub'
        }
        //,urlArgs: "bust=" + (new Date()).getTime()
        //,
        //shim : {
        //    'jqx/jqxcore': ['jquery'],
        //    'jqx/jqxsplitter': ['jquery', 'jqx/jqxcore'],
        //    'signalR': ['jquery'],
        //    'pubsub' : ['jquery']
        //}
    });

The trailing slash on the packages path seems to have addressed the issue, in part with also removing the name in the define part of the module. So it now looks like

define(['deps'],function(deps){
});

Rather than

define('myMod',['deps'],function(deps){
});

Upvotes: 4

yves amsellem
yves amsellem

Reputation: 7234

Couple of things:

  • it seems strange to use window.require instead of just require
  • names in 'shim' must match names in 'paths', this is not the case, here
  • document.ready is done for free by require, no need to do it again

So: do you have any loading error in your JS console? Does it says a script is missing?

Here is a working require configuration, Router is in the same folder of this code:

require.config({
    paths:{
        'jquery':'lib/jquery.min',
        'backbone':'lib/backbone.min',
        'underscore':'lib/underscore.min',
        'router':'Router'
    },
    shim:{
        'backbone':{ deps:['jquery', 'underscore'] },
        'router':{ deps:['backbone'] }
    }
});

require(['router', 'jquery', 'underscore', 'backbone'],
    function (Router) {
        var router = new Router();
        $('img').hide();
    });
});

And the index.html:

<html>
<head>
    <script data-main="assets/js/App.js" src="assets/js/lib/require.min.js"></script>
</head>
<body>...</body>
</html>

Upvotes: 1

Related Questions