loading multiple modules using requireJS in latest firefox 21.0 fails

Question

I tried with 3 diff modules as defined below

credit.js

        define(function(){
            return{
                getCredits: function (){
                    console.log("Inside getCredits");
                    return 10;
                }
              }
        });

product.js

        define(function(){
          console.log("Inside product");
          return {
            bookTheProduct: function(){
            console.log("Inside bookTheProduct");
            return true;
          }
         }
        });

pruchase.js

        require.config({
            shim: {
                purchase: {
                    deps : ["credit","product"]
                }
            }
        });
        define(["credit","product"], function(credit,product){
            console.log("purchaseproduct");
            return {
                 purchaseProduct: function (){
                     console.log("Inside of PurchaseProduct");
                     var credits = credit.getCredits();
                     if(credits > 0){
                         product.bookTheProduct();
                         return true;
                     }
                     return false;
                 }
            }
        });

used it in app.js

        require(["purchase"],function(purchase){
          purchase.purchaseProduct();
        })

Tried this in firefox 21.0 , while loading purchase it loaded credit module but never loaded product module . If i reverse the order it loads the product module but not the credit module . Didn't find any help in RequireJs documentation nor in mozilla documentation . Also didn't see anyone cribing abt it . did any body ever faced this problem ? I am doing some thing wrong , if so can you please point me the mistake . thanks

Answer 1

As mentioned in the comments, the shim configuration is for Javascript files that do not support AMD module definitions and is used to import for example javascript libraries that add some variable to the window scope (like jQuery). Read more about shim here.

In your case, all your modules are AMD modules (they are all defined using define), so shim is not necessary. Instead you can just use the paths configuration to create aliases for your modules. Also moving your require.config out of the modules and into where your require call happens is recommendable.

So, remove the require.config from your purchase.js -file, then add the following to the beginning of your app.js -file

require.config({
  // with the paths -config, you create aliases for you modules
  // basically you tell require that this file contains definition for module x
  paths: {
    'purchase': 'path/to/purchase', // no .js file ending in the path
    'credit': 'path/to/credit',
    'product': 'path/to/product'
  }
});

You can read more about require.config here.

Now you have configured RequireJS so, that it knows where the modules purchase, credit and product are located and that it will load them. After this they can be referenced with their respective aliases when declaring RequireJS dependencies.

Hope this helps!