single dependency across multiple modules - r.js "the following module share the same URL"

Question

I have implemented requirejs across a multipage web application, which works fine but now I am trying to use r.js to create a single file of 'all' the modules except any of the third party libraries and frameworks such as jquery etc...

the broken down build file (build.js) looks like this:

({

baseUrl: "../",
out: "main-v0.1.js", //"charts-v0.1.js",

include: [


    "bi/jquery/jquery.ui.autocomplete",
    "bi/jquery/jquery.ui.combobox",


    "bi/ui/investmentselector"
],

wrap: true,

exclude: [
    'jquery', 'jqueryui', 'jcanvas', 'jqtools', 'prettyphoto', 'cssSandpaper', 'knockout', 'datatables', 'handlebars'
],
preserveLicenseComments: false,
optimize: "none", // "uglify", "uglify2"

paths: {
    handlebars      : 'lib/handlebars',
    /*hb runtime    : 'lib/handlebars.runtime',*/
    jquery          : 'lib/jquery-1.9.1',
    jqueryui        : 'lib/jquery.ui/jquery-ui-1.10.3.min',
    jcanvas         : 'lib/jcanvas.min',
    jqtools         : 'lib/jquery.tools/jquery.tools.min',
    prettyphoto     : 'lib/jquery/jquery.prettyphoto-3.1.5.min',
    BI              : 'bi/BI',
    sliderconnect   : 'bi/charts/slider-connect',
    cssSandpaper    : 'lib/csssandpaper/cssSandpaper',
    csstransform    : 'bi/enhance/csstransform',
    knockout        : 'lib/knockout-2.2.1',
    datatables      : 'lib/jquery/jquery.dataTables',
    // jquery ui widgets
    uicombobox      : 'bi/jquery/jquery.ui.combobox',
    uiautocomplete  : 'bi/jquery/jquery.ui.autocomplete'
}

})

The jquery.ui.autocomplete.js and jquery.ui.combobox.js files are custom jqueryui widgets without any define() wrapped around them. The module investmentselector.js (broken down) looks like this...

define(['jquery',
    'bi/templates/investmentselector.js',
    'bi/jquery/datatables/investmentselector.js',
    'lib/JSLinq/JSLINQ.js',
    'uicombobox', 'uiautocomplete'], function ($, tmp, datatables, jsLinq, uicombobox, uiautocomplete) {

    'use strict';


    var methods = {
        // ... code
    };

    return methods;
});

what I am getting when I run r.js to build the single file named 'main-v0.1.js' is this...

Tracing dependencies for: D:/Files/Trunk/BestInvest.Select.Website/js/build/main
-v0.1.js
Error: Error: Module loading did not complete for: bi/ui/investmentselector, uic
ombobox, uiautocomplete
The following modules share the same URL. This could be a misconfiguration if th
at URL only has one anonymous module in it:
D:/Files/Trunk/BestInvest.Select.Website/js/bi/jquery/jquery.ui.autocomplete.js:
 uiautocomplete, bi/jquery/jquery.ui.autocomplete
D:/Files/Trunk/BestInvest.Select.Website/js/bi/jquery/jquery.ui.combobox.js: uic
ombobox, bi/jquery/jquery.ui.combobox
    at Function.build.checkForErrors (D:\Files\Trunk\BestInvest.Select.Website\j
s\build\r.js:27237:19)

Any ideas as to what is going on?

FYI the widget code (broken down again) looks like this...

$.widget("bi.bicombobox", {
_create: function () {
    // ...code
},
_destroy: function () { }
});

and...

$.widget("bi.biautocomplete", {
_create: function () {
    // ...code
},
_destroy: function () { }
});

Any help on this would be greatful, Thanks!

Answer 1

Your include option uses the full paths to your module instead of using the abbreviated names you've established in paths. Use the names you have in paths:

include: [
    "uicombobox",
    "uiautocomplete",
    "bi/ui/investmentselector"
]

I've not seen another name defined for the last one so I've left it as-is. Generally, you don't want to have something like foo: "path/to/foo" in your paths and sometimes use foo sometimes path/to/foo when referring to the module in dependencies. You always want to use foo, everywhere. Here, r.js sees uicombobox (to take one example) and resolves its path through paths. It sees "bi/jquery/jquery.ui.combobox" in include and resolves it by just adding the .js and it points to the same file as the first case. Then it realizes that it has two modules pointing to the same file and can't process the file because ultimately the file needs to be associated with just one module.

I also notice that your define call lists some of the dependencies with the .js extension. This goes against the recommended practice of not specifying the extension. And having sometimes the extension, sometimes not, could cause issues like what I've explained above.