requirejs, almond: A stand alone module built with almond loads all dependencies, but the main code is not executed

Question

I am trying to build a stand alone module with almond and this is my setup. The question is at the bottom.

Abbreviated directory structure is:

|-static
   |-core
      |-js
        |-require.js
        |-almond.js
        |-common.js
        |-app.build.js
        |-app
          |-myApp.js

   |-vendor
      |-js
        |-jquery.js
        |-bootstrap.js
        |-fancybox.js

Abbreviated contents of common.js:

require.config({
    baseUrl: "/static/core/js",
    paths: {
        'jquery':'../../vendor/jquery/1.7.2/jquery',
        'bootstrap':'../../vendor/bootstrap/2.2.2/js/bootstrap',
        'fancybox':'../../vendor/fancybox/2.0.6/jquery.fancybox',
    },
    shim: {
        'bootstrap':['jquery'],
        'fancybox': ['jquery'],
        'app/messages': ["jquery"],
    },
    waitSeconds: 12
});

Abbreviated contents of app/myApp.js (YES I KNOW I AM POLLUTING THE GLOBAL NAMESPACE):

define(function (require) {
    var $ = require('jquery');
    require('fancybox');
    require('app/messages');

    //all myApp's code here
    console.log('Is this thing on?')
});

My build file: app.build.js:

mainConfigFile: 'common.js',
removeCombined: true,
skipDirOptimize: true,
wrapShim: false,
wrap: false,

modules: [
    {
        name: 'almond',
        include: ['app/myApp'],
        out: ['myApp.js'
    },

],

UPDATE (added html): Bottom of my django template HTML:

{% require_module 'myApp' %}

The template tag translates to:

<script src="/static/core/js/myApp.js"></script>

When i execute the build i get the complete build with almond, all myApp's dependencies, and all of myApp's code. However, the dependencies load and execute their code, but myApp's code does not execute.

I would expect that after the myApp's dependencies load I would see "Is this thing on?" (see app/myApp.js above) in the console, but no dice...

NOTE: I am actually using django-require to build the stand alone module, but i think the app.build.js is fairly close to what it is doing and considering that the final myApp.js file contains all the necessary pieces it should not make a difference.

Chilly

Can you show us the HTML that loads the whole thing? – Helminthology

@Helminthology i have added the html – Chilly

Is common.js included in the final bundle that r.js produces? – Helminthology

at this point no, i was trying to to a require(['common'],function('common'){..define callback..});but that resulted in just almond in the file. I'm going to try and just require it inside the callback. – Chilly

@Helminthology I tried adding common, but same result. – Chilly

Answer 1

Try changing your define class to a require class:

require( ["jquery", "fancybox", "app/messages"], function ($, fancybox, messages) {

    //all myApp's code here
    console.log('Is this thing on?')
});

Put the file containing your require.config in your head above any other files using require. Then make sure that the file holding your new require function is in your HTML for referencing.

Thats how I have used require in the past at least.

Gaultiero

The first thing i did was use your version of define() and i had the same results. I also tried putting the require.config in app/myApp.js but again no difference. Besides, all the dependencies load and execute so it should not be a config issue. Thanks for the suggestion. – Chilly

opps, i missed your point. Change define to require, trying that now. – Chilly

THANKS! That did the trick!! Any idea why the require() works and define() does not? It seems very arbitrary when to use witch. – Chilly

That's because there's nothing kicking off the loading of your code. define only defines a module. There has to be an initial require explicitly or implicitly. You could use insertRequire in the build config you give r.js. It takes an array of module names. Just putting your main module there would do the same thing QBM5 suggested. – Helminthology