We Keep Coding

requirejs include multiple extensions for jquery control

How do you load other extensions for a jquery control called 'fancytree' I'm trying to get fancytee to load or include the fancytree.table.js and other extensions that are needed - below is my config
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
'jquery-ui': {
exports: "$",
deps: ['jquery']
},
'fancytree': {
deps: ['jquery-ui']
},
'alertify': {
deps: ['jquery']
},
'fancytreetable': {
deps: ['jquery', 'fancytree']
}
},
paths: {
'jquery': '../lib/jquery/jquery',
'underscore': '../lib/underscore/underscore',
'backbone': '../lib/backbone/backbone',
'text': '../lib/text/text',
'jquery-ui': '../vendor/jquery-ui/jquery-ui',
'fancytree': [
'../vendor/fancytree/fancytree',
'../vendor/fancytree/fancytree.table'/* this extension here needs to be added but it's not included */
],
'alertify': '../vendor/alertify/alertify'
},
baseUrl: '/js/app',
});

Nikhil Mehta's comment points you in the right direction. Your paths value for fancytree is wrong. You use an array there when you want to provide fallback values for modules. If you give [A, B, C], for instance, if A fails to load, RequireJS tries B and if this fails, tries C. And if all fail, then that's a load failure.
Based on the configuration you show, you'd need:
fancytree: '../vendor/fancytree/fancytree',
fancytreetable: '../vendor/fancytree/fancytree.table'
You already have a shim that establishes that fancytreetable needs fancytree.
Note that unless you are using fairly old versions of Underscore and Backbone, you do not need to specify shim values for them. RequireJS is probably going to just ignore them but it may confuse people reading your code.

Here is how made it work, requirejs with jquery.fancytree-all and latest jquery-ui with AMD support, since working with individual extensions will require a lot of shimming.
onBuildWrite is optional but i prefer it this way
requirejs.config({
paths: {
'jquery': './js/vendor/jquery',
'jquery-ui': './js/vendor/jquery-ui',
'jquery.fancytree': './js/vendor/fancytree/jquery.fancytree-all'
},
shim: {
'jquery.fancytree': {
deps: ['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'],
exports: 'jQuery.fn.fancytree'
}
},
onBuildWrite: function (moduleName, path, contents) {
'use strict';
if (moduleName === 'jquery.fancytree') {
contents = 'define( "jquery.fancytree", ["jquery", "jquery-ui/core", "jquery-ui/effect", "jquery-ui/effects/effect-blind", "jquery-ui/widgets/draggable", "jquery-ui/widgets/droppable"], function(jQuery) { ' + contents + '});';
}
return contents;
}
});
// usage
define([
'jquery',
'jquery.fancytree',
'css!./css/fancytree/skin-custom/ui.fancytree.css',
],
function($) {
'use strict';
//
$('#tree').fancytree({
checkbox: true,
source: [{title: 'Node 1'}, {title: 'Node 2',key: 'id2'}]
});
//
});
//

What's the correct way to load Marionette (v3) with RequireJS?

I searched in vain all over Google on how to load Marionette v3-pre.4 - latest version until now (July 2016) - with RequireJS.
The bundled version of the library seems to be broken for RequireJS so I have to manually include "backbone.babysitter" and "backbone.radio" which are required for this version of Marionette.
According to: versioneye.com I need:
"backbone.babysitter" 1.0.0-pre.1 and
"backbone.radio" * 2.0.0-pre.1*
So I tried installing them with Bower:
bower install backbone.babysitter
It returned:
Unable to find a suitable version for backbone.babysitter, please choose one by typing one of the numbers below:
1) backbone.babysitter#^0.1.12 which resolved to 0.1.12
2) backbone.babysitter#1.0.0-pre.1 which resolved to 1.0.0-pre.1 and is required by marionette#3.0.0-pre.4
Prefix the choice with ! to persist it to bower.json
I selected the 2nd one like this:
? Answer !2
It returned:
bower resolution Saved backbone.babysitter#1.0.0-pre.1 as resolution
I did exactly the same with backbone.radio:
bower install backbone.radio
Returned:
Unable to find a suitable version for backbone.radio, please choose one by typing one of the numbers below:
1) backbone.radio#^1.0.5 which resolved to 1.0.5
2) backbone.radio#2.0.0-pre.1 which resolved to 2.0.0-pre.1 and is required by marionette#3.0.0-pre.4
Prefix the choice with ! to persist it to bower.json
Selected:
? Answer !2
Returned:
bower resolution Saved backbone.radio#2.0.0-pre.1 as resolution
Everything seemed to be ok, but when I checked the version for these two libraries in each's "bower.json" file, I found out that:
backbone.babysitter is at:
"name": "backbone.babysitter",
"version": "0.1.11"
and backbone.radio:
"name": "backbone.radio",
"version": "1.0.4"
Where did I go wrong?
This is my bower.json:
{
"name": "Example App",
"authors": "Consta Gorgan",
"dependencies": {
"backbone": "~1.2.3",
"backbone.radio": "~2.0.0",
"backbone.babysitter": "~1.0.0",
"marionette": "~3.0.0",
"requirejs": "~2.1.15",
"requirejs-plugins": "~1.0.2"
},
"resolutions": {
"backbone.radio": "2.0.0-pre.1",
"backbone.babysitter": "1.0.0-pre.1"
}
}
This is my shim file:
requirejs.config({
paths: {
jquery: '../bower_components/jquery/dist/jquery',
underscore: '../bower_components/underscore/underscore',
backbone: '../bower_components/backbone/backbone',
'backbone.radio': '../bower_components/backbone.radio/build/backbone.radio',
'backbone.babysitter': '../bower_components/backbone.babysitter/src/build/backbone.babysitter',
marionette: '../bower_components/marionette/lib/core/backbone.marionette'
},
shim: {
jquery: {
exports: '$'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
underscore: {
exports: '_'
},
marionette: {
deps: [ 'jquery', 'underscore', 'backbone', 'backbone.radio', 'backbone.babysitter' ],
exports: 'Marionette'
}
}
})
And this is how I load modules with RequireJS in my app.js file:
define([
'jquery',
'underscore',
'backbone',
'marionette',
'router'
], function ($, _, Backbone, Marionette, Router) {
'use strict'
var init = function () {
Router.init()
}
return {
init: init
}
})
Aaand this is the error I keep getting in my browser:
And this one after a few more seconds:

Instead of ../bower_components/backbone.babysitter/src/build/backbone.babysitter use ../bower_components/backbone.babysitter/lib/backbone.babysitter

If anyone runs into this, v3.0 changed to remove babysitter
requirejs.config({
paths: {
jquery: 'node_modules/jquery/dist/jquery',
underscore: 'node_modules/underscore/underscore',
backbone: 'node_modules/backbone/backbone',
'backbone.radio': 'node_modules/backbone.radio/build/backbone.radio',
marionette: 'node_modules/marionette/lib/backbone.marionette'
},
shim: {
jquery: {
exports: '$'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
'backbone.radio': {
deps: [
'underscore',
'backbone'
],
export: 'Radio'
}
underscore: {
exports: '_'
},
marionette: {
deps: [ 'jquery', 'underscore', 'backbone', 'backbone.radio' ],
exports: 'Marionette'
}
}
});

Angular-route: TypeError: undefined is not an object (evaluating 'angular.module')

I'm building my Angular app, using require.js, angular.js and angular-route.js.
My main.js is as follows:
require.config({
// alias libraries paths
paths: {
'angular': 'libs/angular',
'domReady': 'libs/domReady',
'angularRoute': 'libs/angular-route'
},
// angular does not support AMD out of the box, put it in a shim
shim: {
'angular' : {'exports' : 'angular'},
},
// kick start application
deps: ['./bootstrap/bootstrap',
'./libs/angular-route',
'./libs/bootstrap'
]
});
Still I do got this strange error:
[Error] TypeError: undefined is not an object (evaluating 'angular.module')
(anonieme functie) (angular-route.js, line 24)
global code (angular-route.js, line 992)
Does someone knows how I can fix this?
Thanks a lot!

You need to add angular js in dependency too.
Update from
deps: ['./bootstrap/bootstrap',
'./libs/angular-route',
'./libs/bootstrap'
]
to
deps: ['./bootstrap/bootstrap',
'angular', // add require dependency of angular
'angularRoute', // use path as set in require config
'./libs/bootstrap'
]

I finally solved by doing this:
paths: {
'angular' : './libs/angular',
'domReady' : './libs/domReady',
'jQuery' : './libs/jquery',
'uiRouter' : './libs/angular-ui-router',
'bootstrap': './libs/bootstrap'
},
// angular does not support AMD out of the box, put it in a shim
shim: {
'angular': {
exports: 'angular',
deps: ['jQuery']
},
'uiRouter': {
deps: ['angular']
},
'bootstrap': {
deps: ['angular']
},
},
});
require(['./bootstrap']);

I had used a Yeoman scaffold to bootstrap my project, and found that the karma file was defaulting to not include the individual files in the browser tests.
Updating Angular to be included fixed this issue for me:
{pattern: 'bower_components/angular/angular.js', included: true },
{pattern: 'bower_components/angular-ui-router/release/angular-ui-router.js', included: false },

Marionette.js Require.js Template Path Error

I have the following directory structure to my tpl:
-src
-assets
-js
-lib
[files]
-src
-templates
-common
builder_regions.tpl
My require.config is:
require.config({
baseUrl:'src/assets/js',
paths: {
backbone: 'lib/backbone',
jquery: 'lib/jquery.min',
'jquery-ui': 'lib/jquery-ui-1.10.4.custom.min',
underscore: 'lib/underscore.min',
modernizr: 'lib/modernizr.min',
'magnific-popup': 'lib/magnific-popup.min',
text: 'src/assets/jslib/text',
marionette: 'lib/backbone.marionette.min',
tpl: 'lib/underscore-tpl'
},
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
deps: [ 'jquery', 'underscore' ],
exports: 'Backbone'
},
marionette: {
deps: [ 'jquery', 'underscore', 'backbone' ],
exports: 'Marionette'
},
'jquery-ui': {
deps: [ 'jquery' ],
exports: '$ui'
},
'magnific-popup': {
deps: [ 'jquery' ],
exports: 'magnificPopup'
},
tpl: [ 'text' ]
}
});
My require module is set-up as:
define([ 'tpl!src/templates/common/builder_regions.tpl', function( Marionette, layoutTpl ) {
console.log( 'did not throw' );
});
When I access the module I get the following error:
GET http://localhost:3000/src/assets/js/src/tpl.js 404 (Not Found)
Why is file tpl.js being referenced when I provided the path in require.config? Thanks!

If your underscore-tpl.js is this one then you do not need a shim configuration for it because it calls define by itself. If you use a shim configuration for something that does not need a shim, RequireJS can behave strangely.
Another thing not related to the problem you are reporting here but could give you trouble down the line: jQuery has not needed a shim since at least version 1.9. So if you use a version that is >= 1.9, you should remove the shim you have for jquery.

Try This:
define(['marionette', 'tpl!src/templates/common/builder_regions.tpl'], function( Marionette, layoutTpl ) {
console.log( 'did not throw' );
});

requirejs window not defined

I'm getting this error when the optimizer is launched by grunt
(I'm using yeoman backbone-generator )
Running "requirejs:dist" (requirejs) task
Error: ReferenceError: window is not defined
I'm using requirejs and the plugin i18n.
This is my main.js
require.config({
//locale: "en",
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
'jquery-notify': {
deps: [
'jquery'
]
},
swiper: {
deps: [
'jquery'
],
exports: 'Swiper'
},
bstrapcollapse: {
deps: [
'jquery',
'bstraptransition'
],
exports: 'collapse',
}
},
paths: {
jquery: '../bower_components/jquery/jquery',
backbone: '../bower_components/backbone-amd/backbone',
underscore: '../bower_components/underscore-amd/underscore',
i18n: '../bower_components/requirejs-i18n/i18n',
'backbone.marionette': '../bower_components/backbone.marionette/lib/core/amd/backbone.marionette',
'backbone.wreqr': '../bower_components/backbone.wreqr/lib/amd/backbone.wreqr',
'backbone.babysitter': '../bower_components/backbone.babysitter/lib/amd/backbone.babysitter',
'jquery-ui': '../bower_components/jquery-ui/ui/jquery-ui',
loglevel: '../bower_components/loglevel/dist/loglevel.min',
moment: '../bower_components/moment/moment',
alertify: '../bower_components/alertify/alertify',
swiper: '../bower_components/swiper/dist/idangerous.swiper-2.0.min',
fastclick: '../bower_components/fastclick/lib/fastclick',
bstrapcollapse: '../bower_components/sass-bootstrap/js/bootstrap-collapse',
bstraptransition: '../bower_components/sass-bootstrap/js/bootstrap-transition',
'requirejs-text': '../bower_components/requirejs-text/text',
async: '../bower_components/requirejs-plugins/src/async',
},
config: {
i18n: {
locale: JSON.parse(window.localStorage.getItem('settings')).language || 'en',
}
}
});
I need to change language based on user input that's why i need to fetch localStorage and set the locale in the config.
There's a solution for this?
Thank you.

I haven't done much in the region of runtime javascript, but I know that many of the libraries you know and are used to in browsers (document object model's "getElementById", local storage) are not available in runtimes like Grunt or Rhino. Your use of localStorage in that settings file appears to be the issue.
Instead, you need to make use of whatever API is given to you. For instance, a quick search found some Grunt examples where they read/write to a file on the filesystem: http://gruntjs.com/sample-gruntfile
Obviously, this would be impossible in a browser, as browsers don't let you access files; but you may as well take advantage of it in Grunt. You can also feature-detect which mode you're in with clauses like this:
if (window) {
...
}
else if (grunt) {
...
}

A workaround that worked for me :
config: {
i18n: {
locale: (function(){
try{
return localStorage.getItem('locale') || 'en' ;
}catch(ex){
return 'en';
}
})()
}
}
But still not convinced by this trick. Maybe someone else has a better idea ?