Kenneth Ahlstrom
Kenneth Ahlstrom

Reputation: 63

requirejs configuration troubles

Due to a FUBAR directory organization in a project, I have spent some time re-organizing JS scripts on said project. The project uses requirejs and was functioning wonderfully before the re-org. However, now nothing loads when called or compiles (we use the r.js optimizer) when run -- though compiling completes without complaint. I have checked, double-checked, triple-checked, and now given in to asking for another set of eyes here on Stack Overflow.

Using RequireJS: 2.1.4 and r.js 2.1.4

The following is my configuration:

build-js.js (used for optimizer)

var requirejs = require('requirejs');

var config = {
    baseUrl: './public/js',
    mainConfigFile: './public/js/config/config.js',
    paths: {
        'requireLib': 'library/require'
    },
    out: ".public/js/minified/main.js",
    name: "minified/main",
    wrap: false,
    preserveLicenseComments: false,
    deps: ["app/main","modules/movie","modules/theatre"]
};

requirejs.optimize(config);

config.js

// Set the require.js configuration for your application.
require.config({
    paths: {
        // JavaScript folders
        libs: "library",
        plugins: "plugin",
        app: "app",
        adminlibs: "../adminassets/js/plugins/ui",

        // Libraries
        jquery: "library/jquery",
        jqcookie: "library/jquery.cookie",
        jqui: "../adminassets/js/plugins/ui/jquery-ui-1.10.0.custom.min",
        jqezmark: "library/jquery.ezmark",
        jqcolor: "library/jquery.color",
        underscore: "library/underscore-amdjs",
        backbone: "library/backbone-amdjs",
        chosen: "library/chosen.jquery", 
        moment: "library/moment",

        // Site Components 
        site: "app/site",
        sitediscussion: "app/site-discussion",
        namespace: "app/namespace",

        // Plugins
        text: "plugin/text", 
        async: "plugin/async", 
        use: "plugin/use",
        datetimepicker: "../adminassets/js/plugins/ui/jquery.datetimepicker",
        ajaxfileupload: "../adminassets/js/plugins/uploader/jquery.ajaxfileupload"
    },

    shim: {
        'chosen': ['jquery'],
        'jqcookie': ['jquery'],
        'jqui': ['jquery'],
        'jqezmark': ['jquery'],
        'jqcolor': ['jquery'],
        'site': {
            deps: ['jquery','jqezmark','chosen','underscore','namespace','jqui','jqcookie'],
            exports: 'site'
        },
        'sitediscussion': {
            deps: ['jquery', 'underscore'],
            exports: 'sitediscussion'
        },
        'jquifull' : ['jquery'],
        'datetimepicker' : ['jqui'],
        'ajaxfileupload' : ['jquery'],
        'backbone': ['underscore','jquery']
    },

    // Initialize the application with the main application file
    deps: ["app/main"]
});

File structure is as follows:

{site-root}/public/js

Which contains directories:

app config library minified modules plugin templates

All files listed above in build-js and config.js are confirmed to be in the expected folders.

requirejs is called as follows:

On dev machines (which I'm currently testing the setup on):
data-main="/js/config/config" src="/js/library/require.js"

On production (currently the minified/main file is not even being created, though it should be)
data-main="/js/minified/main" src="/js/library/require.js"

Can anyone see what I may be doing wrong? Again, there have been no changes to the site proper, the javascript, etc except in the two files (build-js.js and config.js) listed above. The only changes are that files have been physically moved in the directory structure. As a result, I'm nearly positive that I have a pathing issue somewhere, but I cannot seem to find it. Help?

Upvotes: 1

Views: 728

Answers (1)

Kenneth Ahlstrom
Kenneth Ahlstrom

Reputation: 63

Resolution has been found. I was referencing my configuration file through the data-main attribute in the requirejs include script tag at "/js/config/config". Though I declared a base-path of /public/js, the system was still attempting to use /js/config/ as my base path ( as stated in requirejs documentation that it will base-path based off your data-main attribute if a base path is not otherwise declared ). I moved my config.js file to /js and changed data-main to /js/config and now all paths are working appropriately, referencing base-path /js.

A side-note is that I did not notice the failure of files to load because of my use of Zend Framework and error handling. There were no 404 Errors and the Network tab of my dev-tools showed success in loading all .js files ... it was only when I looked at the response-content of those files that I found they were spitting out PHP error logs rather than .js content.

Upvotes: 1

Related Questions