Curl throwing ‘Promise already completed’ error

Question

I’m currently testing various asynchronous-resource-loaders to see which one I want to use. At the moment Curl is throwing a ‘Promise already completed’ error…and their documentation says ‘this should never happen’.

I “suspect” I must to use a ‘define’ within each file being loaded (hope not). Further, their documentation says Curl can work with non-AMD javascript files. But...I am new to AMD and since Curl is far-faster than the other ones I'm testing...I am willing to put some time into understanding this better.

Lastly...

Even though FireBug shows the errors...all the files STILL LOAD asynchronously! But, BECAUSE there are errors...the 'then' portion of the code never gets called.

So My Questions Are:

• Do I have to update all the JavaScript file-objects to be contained in a 'define'? (...hope not)
• Can you see any other problem syntactically?

The Head’s Code Looks Like This:

<script type="text/javascript">
    ///<summary>Configuration</summary>
    curl = { baseUrl: 'Includes/JavaScript/' };
</script>
<script src="Loaders/Curl/curl.js" type="text/javascript"></script>
<script type="text/javascript">

    function onSuccess() {
    }
    function onError(ex) {
        //alert(ex);
    }

    require(["MooTools/Core/mootools-1.2.2-core-jm",
        "MooTools/mGeneral",
        "jQuery/Core/jquery-1.3.2",
        "jQuery/Core/jquery.tools.min",
        "jQuery/ThirdPartyPlugIns/jquery.tmpl"])
        .then(onSuccess, onError);

    //require(["jQuery/TopUp/top_up-min"], null);

    require(["jQuery/ThirdPartyPlugIns/jquery.dimensions",
        "jQuery/ThirdPartyPlugIns/jQuery.Color.Animations",
        "jQuery/ThirdPartyPlugIns/jquery.corners.min",
        "jQuery/ThirdPartyPlugIns/jquery.tipsy",
        "jQuery/ThirdPartyPlugIns/jquery.numberformatter-1.1.0",
        "jQuery/ThirdPartyPlugIns/jquery.tipsy"]);

    require(["general",
        "WindowCenter",
        "ThirdPartyPlugin/KeyBoardCapture",
        "ThirdPartyPlugin/bsn.AutoSuggest_2.1.3",
        "ee/8Ball",
        "ee/EE"]);
</script>

Again...I'm sure it is caused by inexperience with AMD-styled code, but I still need help...so any is appreciated.

Answer 1

Typically, you should wrap your modules in a define() or append a define() at the end of the file if those modules have no dependencies. It seems, though, that those modules all depend on jQuery, if not other modules/files.

Since you're not using standard AMD require()/define() protocol, AMD is not really helping you with these modules. Unless you plan to write your own modules using define(), then you could use just about any async loader.

That said, there is a way to make curl.js work with non-AMD modules/files. Use the js! plugin. Here's your first block of files translated to use the js! plugin (note I also added the ".js" ext back on which I like to do with non-modules):

// we load the core files first, then get the next block that depends on them
curl([
    "js!MooTools/Core/mootools-1.2.2-core-jm.js",
    "js!jQuery/Core/jquery-1.3.2.js"
]).next([
    "js!MooTools/mGeneral.js",
    "js!jQuery/Core/jquery.tools.min.js",
    "js!jQuery/ThirdPartyPlugIns/jquery.tmpl.js"
]).then(onSuccess, onError);

If any of those files within each array depend on each other, you can also use the !order suffix on them to ensure they wait for other files before executing/evaluating (be sure you're setting proper cache headers, though). Actually, the !order suffix is the fastest method as long as there are no caching issues (mobile browsers add some additional constraints on file size).

Were there any other error messages? Specifically, I would expect curl.js to throw at least one error besides just "Promise not completed".

Also, please check the Net tab (Firebug) or the Network tab (Chrome) to check that curl.js is looking in the correct location for the modules.

FWIW, I am planning to remove the alias require --> curl. The reason is that the global require function is non-standard (and explicitly not standardized in the AMD proposal). I suggest you use curl() instead of require().

curl.js also allows it's top-level api to be aliased explicitly via the "apiName" config param if you really, really want to use the name "require". :)

<script>curl = { apiName: "require" }; </script>
<script src="path/to/curl.js"></script>
<script>require(["some/modules"]).then(success, failure);</script>

More FWIW: the standard require is typically only needed in a module and can be requested by including it as a dependency:

define(["require"], function (require) {
    require(["another/module"], function (another) {
        // use another module here
    });
});

-- John

Answer 2

If you're only doing normal javascript file loading (not modules), as it appears, i would encourage you to check out LABjs (http://labjs.com). LABjs focuses on being the most performance optimized loading solution (to the exclusion of some other features like module/dependency style stuff).

In fact, LABjs 2.0a (https://github.com/getify/LABjs/blob/master/next/LAB.src.js), which will be fully released in the next few days, is really exceptionally fast (even more than 1.2) at loading general scripts in parallel. I encourage you to give it a try, unless (as John eludes to above) you plan to go to module syntax... then stick with Curl or RequireJS.