Build Issue - undefined is not a function

[Palgie]

Hi All!

Are there any known build issues at the minute?

The Grunt task looks to be compiling the dist fine and without errors but on request in my app I get the undefined error against Aura (screenshot below) and haven't been able to figure out why.

I've been using the unbuilt Aura during development and noticed the problem when trying to package up the resources.

I tried using the current state of 'aura-master' without changes and I still get the same issue.

Running "requirejs:compile" (requirejs) task
>> Tracing dependencies for: /Users/gourleyp/Downloads/aura-master/dist/aura.js
>> Tracing dependencies for: jquery
>> Uglify2 file: /Users/gourleyp/Downloads/aura-master/dist/aura.js
>> /Users/gourleyp/Downloads/aura-master/dist/aura.js
>> ----------------
>> /Users/gourleyp/Downloads/aura-master/lib/platform.js
>> /Users/gourleyp/Downloads/aura-master/lib/base.js
>> /Users/gourleyp/Downloads/aura-master/lib/logger.js
>> /Users/gourleyp/Downloads/aura-master/lib/aura.extensions.js
>> /Users/gourleyp/Downloads/aura-master/lib/aura.js
>> /Users/gourleyp/Downloads/aura-master/lib/ext/debug.js
>> /Users/gourleyp/Downloads/aura-master/bower_components/eventemitter2/lib/even
>> temitter2.js
>> /Users/gourleyp/Downloads/aura-master/lib/ext/mediator.js
>> /Users/gourleyp/Downloads/aura-master/lib/ext/components.js

requirejs: {
      compile: {
        options: {
          baseUrl: '.',
          optimize: 'uglify2',
          preserveLicenseComments: false,
          paths: {
            aura: 'lib',
            jquery: 'empty:',
            underscore: 'empty:',
            eventemitter: 'bower_components/eventemitter2/lib/eventemitter2'
          },
          shim: {
            underscore: {
              exports: '_'
            }
          },
          include: [
            'aura/aura',
            'aura/aura.extensions',
            'aura/ext/debug',
            'aura/ext/mediator',
            'aura/ext/components'
          ],
          exclude: ['jquery'],
          out: 'dist/aura.js'
        }
      }
    }

Has anyone experienced this before that might be able to help?

Gist of the unoptimised dist: https://gist.github.com/Palgie/6917947

Let me know if you need any more information.

Cheers,
Phil

[Palgie]

This is also happening on both versions (fresh installs) of your packages. With and without boilerplate.

[Palgie]

I've actually got this working temporarily for my project.

Fixed by exporting Aura from require:

app.js

require.config({
    paths: {
        aura: '../dist/aura'
    },
    shim : {
        aura: {
            exports: 'Aura'
        }
    }
});

I tried exporting Aura on it's own without the additional changes below without any joy.

So I changed app.use arguments to this instead:

aura.js

app.use('lib/ext/debug');
app.use('lib/ext/mediator');
app.use('lib/ext/components');

I also created another requireJS config in main aura file to reference paths from config rather than relative paths.

require.config({
    paths: {
        base: '../lib/base',
        auraExtensions: '../lib/aura.extensions',
        logger: '../lib/logger',
        platform: '../lib/platform'
    }
});

Reconfigured the build to suit.

   requirejs: {
      compile: {
        options: {
          baseUrl: '.',
          optimize: 'uglify2',
          name: 'aura',
          paths: {
            aura: 'lib/aura',
            base: 'lib/base',
            auraExtensions: 'lib/aura.extensions',
            logger: 'lib/logger',
            platform: 'lib/platform',
            underscore: 'bower_components/underscore/underscore'
          },
          shim: {
             underscore: {
                exports: '_'
             }
          },
          include: [
            'lib/ext/debug',
            'lib/ext/mediator',
            'lib/ext/components'
          ],
          out: 'dist/aura.js'
        }
      }
    }

If anyone else is struggling with this problem I guess this works as a temporary fix.

[addyosmani]

This is a known issue and something we need to fix. Would you be interested in putting together a PR with the temporary fix until we have an opportunity to properly address this?

[Palgie]

Sure, it would be a pleasure. I can have a look at getting this in a PR state over the weekend.

[VirtueMe]

I got the same issue when testing my application. I found out what the error was. I think I struggled with this for 10 hours before I got it to work. It's related to how require loads the information. When I tested creating source maps #324, I could not get it to work. But with a lucky guess on the inner workings on requirejs I figured out the answer.

In your paths configuration you setup aura to point to the folder and not the file where you're minified aurajs file is.

'aura': '../bower_components/aura/dist/'

And you don't need to shim out Aura..

[Palgie]

Sounds good. Could you sort a pull request Benny? I haven't had chance to put the temporary change in.

[VirtueMe]

This is actually nothing we need to change in aurajs, I think aurajs does it correctly. My config addition is how you add aurajs to your apps grunt file when you build your own app. I might add a example to the aurajs/examples to show how to do it. Se aurajs/examples#4

In your case, @Palgie you only change your apps file to this and it should work:

require.config({
    paths: {
        aura: '../dist/'
    }
});

[Palgie]

Unfortunately it's not working for me Benny.

I started with a new boilerplate:

require.config({
    paths: {
        aura: 'bower_components/aura/dist'
    }
})

require(['aura'], function(Aura) {
  Aura()
    .use('extensions/aura-awesome-extension')
    .start({ components: 'body' }).then(function() {
      console.warn('Aura started...');
    });
});

This returns as:

GET http://localhost:9032/bower_components/aura/dist/.js 404 (Not Found) 

Fixing the 404 will also then result with the same problem reported originally.

require.config({
    paths: {
        aura: 'bower_components/aura/dist/aura'
    }
})

require(['aura'], function(Aura) {
  Aura()
    .use('extensions/aura-awesome-extension')
    .start({ components: 'body' }).then(function() {
      console.warn('Aura started...');
    });
});

Uncaught TypeError: undefined is not a function 

Is this similar to your fix?

[VirtueMe]

It's all about the /after dist. The boilerplate is then incorrect in my view when it addresses the aura library with ['aura']. It should be like this: ['aura/aura']. Or at least this was how it worked for me.

This is how it should look.

require.config({
    paths: {
        aura: 'bower_components/aura/dist/'
    }
})

require(['aura/aura'], function(Aura) {
  Aura()
    .use('extensions/aura-awesome-extension')
    .start({ components: 'body' }).then(function() {
      console.warn('Aura started...');
    });
});

[Palgie]

Well that's pretty surprising/interesting, this does indeed work and I'd support your request of transparency around the dist / minified file inclusion linked above.

Traditionally you'll reference any new path definition as ['aura'] so I hope you can understand the confusion here.

I really appreciate your input on this issue.

[VirtueMe]

I stumbled over this using the requirejs i18n language library extensively the last year. I develop german, english, swedish, finnish and norwegian sites so I have to use it to support different languages in the same javascript singel app solution.

I struggled with files referencing language files in the same folder using different counts of ../ and I almost never knew if I got the correct count in the file. The solution was not obvious in my eyes. But I found out that if you not added a . or ../ to my language module reference in a define statement and I had it defined as a path it actually would load the file from that folder.

In my configuration:

paths: {
  nls: '../../nls'
},

This path will expand relative to your baseUrl. So now I can access every language file

if my widget main.js define statement

define(['./view/app', 'i18n!nls/widgetname'], function(App, lang) {
'use strict';
... lots of bad practice code
  return {
    initialize: function(config) {
      new App({ el: config.el, config: config.config}).render();
    }
  };
});

in my widget view folder any file could reuse this path

define(['Backbone', 'i18n!nls/widgetname'], function(Backbone, lang) {
'use strict';

  var App = Backbone.View.extend({
// ....
   });
  return App;
});

When I looked in the minified file I found out that aurajs defines it selv as a named module with name 'aura/aura' I understood that I wanted to reference it with the module name. That seemed logical. But It was hard to get the config correct. I tried 'aura/aura': 'path to aura.js file' with no success. After 10 hours not giving up on this solution I found the correct way to reference it and get it to work.

I found another great solution to keep code usable both for production and test environment. Because I'm running my test with requirejs and phantomjs, Requirejs would not override paths defined in module configs that defined it's paths with the the test config paths.

My problem: I wanted to setup cdn paths to require in my module config. But phantomjs will only use local files when you run it. I browsed around and found out that it was designed not to override already configured paths. But the solution to that problem is actually to map that library to another version of that library: How to map to a different version This is nice because I want to override Aurajs default config for jquery, underscore and text both in production and test. If I treat the test locations as different version as they actually are, it will work.

So in my test configuration:

              paths: {
                'jquerylib': '../bower_components/jquery/jquery',
                'underscorelib': '../bower_components/underscore/underscore',
                'textlib': '../bower_components/requirejs-text/text',
                'aura': '../bower_components/aura/dist/'
              },
              shim: {
                'jquerylib': {
                  exports: '$'
                },
                'underscorelib': {
                  exports: '_',
                }
              },
              map: {
                '*': {
                  'underscore': 'underscorelib',
                  'jquery': 'jquerylib',
                  'text': 'textlib'
                }
              },