Develop Reference

Handlebars isn't getting exported?

Problem
When executing the compiled handlebars templates the global Handlebars object isn't exported. NOTE: the global Backbone object is working.
See, when the code App.templates.todos attempts to execute in the todos.js file it fails because App.templates.todos isn't defined. Well ultimately that's because the third line in the templates.js file can't execute because the global Handlebars object isn't defined.
Why wouldn't that object get defined? What did I do wrong with require.js here?
UPDATE: I've verified that the handlebars.runtime.js file is in fact executing before the templates.js file and so require.js is running them in the right order when loading the todos.js file.
Bower Components
{
"name": "todomvc-backbone-requirejs",
"version": "0.0.0",
"dependencies": {
"backbone": "~1.1.0",
"underscore": "~1.5.0",
"jquery": "~2.0.0",
"todomvc-common": "~0.3.0",
"backbone.localStorage": "~1.1.0",
"requirejs": "~2.1.5",
"requirejs-text": "~2.0.5",
"handlebars": "~2.0.0"
},
"resolutions": {
"backbone": "~1.1.0"
}
}
main.js
/*global require*/
'use strict';
// Require.js allows us to configure shortcut alias
require.config({
// The shim config allows us to configure dependencies for
// scripts that do not call define() to register a module
shim: {
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
backboneLocalstorage: {
deps: ['backbone'],
exports: 'Store'
},
handlebars: {
exports: 'Handlebars'
},
templates: {
deps: ['handlebars'],
exports: 'App'
},
underscore: {
exports: '_'
}
},
paths: {
jquery: '../bower_components/jquery/jquery',
underscore: '../bower_components/underscore/underscore',
backbone: '../bower_components/backbone/backbone',
backboneLocalstorage: '../bower_components/backbone.localStorage/backbone.localStorage',
handlebars: '../bower_components/handlebars/handlebars.runtime',
templates: '../../../templates',
text: '../bower_components/requirejs-text/text'
}
});
require([
'backbone',
'views/app',
'routers/router'
], function (Backbone, AppView, Workspace) {
/*jshint nonew:false*/
// Initialize routing and start Backbone.history()
new Workspace();
Backbone.history.start();
// Initialize the application view
new AppView();
});
todos.js
/*global define*/
define([
'jquery',
'backbone',
'handlebars',
'templates',
'common'
], function ($, Backbone, Handlebars, Templates, Common) {
'use strict';
var TodoView = Backbone.View.extend({
tagName: 'li',
template: App.templates.todos,
...
});
return TodoView;
});
templates.js
this["App"] = this["App"] || {};
this["App"]["templates"] = this["App"]["templates"] || {};
this["App"]["templates"]["stats"] = Handlebars.template({"1":function(depth0,helpers,partials,data) {

From official documentation of RequireJS:
The shim config only sets up code relationships. To load modules that
are part of or use shim config, a normal require/define call is
needed. Setting shim by itself does not trigger code to load.
So first you need to somehow call the Handlebars and after try to use it in templates.js.

Marionette v2.2 upgrade error - Cannot read property 'ChildViewContainer' of undefined

I've started a new backbone, marionette and require project using version 2.2 (i previously worked with 1.8) It seems a lot has changed. I'm getting an error when the browser loads marionette:
Uncaught TypeError: Cannot read property 'ChildViewContainer' of undefined
This is my main.js file:
require.config({
baseURL: 'scripts',
paths: {
"jquery": "lib/jquery",
"underscore": "lib/underscore",
"backbone": "lib/backbone",
"marionette": 'lib/backbone.marionette',
"templates": "../templates",
"text": "lib/text"
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
marionette: {
deps: ['jquery', 'underscore', 'backbone'],
exports: 'Marionette'
},
waitSeconds: 15
}
});
require([ "app", "marionette"], function(App, marionette) {
App.start();
});
And this is my app.js file:
define(["marionette", "router"], function (Marionette, AppRouter) {
var MyApp = Marionette.Application.extend({
initialize: function(options) {
console.log("options.container");
}
});
var MyApp = new MyApp({container: '#page'});
MyApp.addInitializer(function (options) {
MyApp.Router = new AppRouter();
Backbone.history.start();
});
// export the app from this module
return MyApp;
});

Just look at your backbone.js file. It's empty. Download backbone.js from http://backbonejs.org/ and replace it.

I just ran into this same issue myself. The issue was multiple instances of Marionette being included on the page. (i had errantly placed a script tag for marionette on the page from cdnjs, as well as trying to include the static file locally via require). removing the reference to the external JS file helped me...

requirejs: Module name "underscore" has not been loaded yet for context [duplicate]

This question already has answers here:
Trouble combining Require.js and Backbone.js/Underscore.js
(3 answers)
Closed 6 years ago.
I always get this error when I freshly load my app,
Error: Module name "underscore" has not been loaded yet for context:
_. Use require([]) http://requirejs.org/docs/errors.html#notloaded
...,h){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.re...
require.js (line 8) TypeError: Backbone.Model is undefined
var ProjectModel = Backbone.Model.extend({
But then they are gone when I hit the refresh button on my browser.
Does anyone know why? How can I fix it?
This is my config/ main/ entry js file,
require.config({
//By default load any module IDs from js/lib
baseUrl: 'js',
paths: {
jquery: 'lib/jquery/jquery-min',
underscore: 'lib/underscore/underscore-min',
backbone: 'lib/backbone/backbone-min',
text: 'lib/text/text'
},
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
exports: 'Backbone'
}
}
});
require([
// Load our app module and pass it to our definition function
'app',
'jquery',
'underscore',
'backbone',
// Pull in the Collection module.
'collection/contacts'
], function(App){
// The "app" dependency is passed in as "App"
App.initialize();
});
Have I missed something?

try this:
shim: {
jquery: {
exports: '$'
},
underscore: {
deps:["jquery"],
exports: '_'
},
backbone: {
deps:["jquery"],
exports: 'Backbone'
}
}

Uncaught Error: No module: MyApp

I load AngularJs and jQuery using RequireJs in nodeJs framework.
That is main.js
require.config({
paths: {
angular: 'vendor/angular.min',
bootstrap: 'vendor/twitter/bootstrap',
jquery: 'vendor/jquery-1.9.0.min',
domReady: 'vendor/require/domReady',
underscore: 'vendor/underscore.min'
},
shim: {
angular: {
deps: [ 'jquery' ],
exports: 'angular'
}
}
});
require([
'app',
'angular-boot'
], function() {
});
in app.js
define(['angular'], function (angular) {
return angular.module('MyApp', []);
})
and in angular-boot.js
define([ 'angular', 'domReady' ], function (angular, domReady) {
domReady(function() {
angular.bootstrap(document, ['MyApp']);
});
});
In my html file I have only this line, in order to declare and use requirejs.
Not ng-ap or anything else.
<script data-main="js/main" src="js/require.js"></script>
The problem is that sometimes runs, sometimes not.
The error when it doesn't run is
Uncaught Error: No module: MyApp
If there is any thought about it, I would really appreciate it.
Thank you very much.

In your shim, you need to setup the app as a dependency to angular-boot. Your angular-boot file depends on app (where MyApp is defined), and because the load order for these two files is not specified, sometimes angular-boot loads before the app and thus produces that error.
To remedy, just update your shim as such:
shim: {
angular: {
deps: [ 'jquery' ],
exports: 'angular'
},
'angular-boot': {
deps: ['app']
}
}
and than, since you don't need to include the 'app' explicitly your require call can be reduced to:
require(['angular-boot']);

Can't load Bootstrap with RequireJS

I can't seem to figure out how to load Bootstrap via RequireJS. None of the examples that I found worked for me.
Here is my shim:
require.config({
// Sets the js folder as the base directory for all future relative paths
baseUrl: "./js",
urlArgs: "bust=" + (new Date()).getTime(),
waitSeconds: 200,
// 3rd party script alias names (Easier to type "jquery" than "libss/jquery, etc")
// probably a good idea to keep version numbers in the file names for updates checking
paths: {
// Core libsraries
// --------------
"jquery": "libs/jquery",
"underscore": "libs/lodash",
"backbone": "libs/backbone",
"marionette": "libs/backbone.marionette",
// Plugins
// -------
"bootstrap": "libs/plugins/bootstrap",
"text": "libs/plugins/text",
"responsiveSlides": "libs/plugins/responsiveslides.min",
'googlemaps': 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDdqRFLz6trV6FkyjTuEm2k-Q2-MjZOByM&sensor=false',
// Application Folders
// -------------------
"collections": "app/collections",
"models": "app/models",
"routers": "app/routers",
"templates": "app/templates",
"views": "app/views",
"layouts": "app/layouts",
"configs": "app/config"
},
// Sets the configuration for your third party scripts that are not AMD compatible
shim: {
"responsiveSlides": ["jquery"],
"bootstrap": ["jquery"],
"backbone": {
// Depends on underscore/lodash and jQuery
"deps": ["underscore", "jquery"],
// Exports the global window.Backbone object
"exports": "Backbone"
},
"marionette": {
// Depends on underscore/lodash and jQuery
"deps": ["backbone", "underscore", "jquery"],
// Exports the global window.Backbone object
"exports": "Marionette"
},
'googlemaps': { 'exports': 'GoogleMaps' },
// Backbone.validateAll plugin that depends on Backbone
"backbone.validate": ["backbone"]
},
enforceDefine: true
});
and here is how I call Bootstrap:
define([
"jquery",
"underscore",
"backbone",
"marionette",
"collections/Navigations",
'bootstrap',
],
function($, _, Backbone, Marionette, Navigations, Bootstrap){
The error that I get is this:
Uncaught Error: No define call for bootstrap
Any ideas on how to get this resolved?

I found a working example here:
https://github.com/sudo-cm/requirejs-bootstrap-demo
I followed it to get my code to work.
According to that demo, especially app.js, you simply make a shim to catch Bootstrap's dependency on jQuery,
requirejs.config({
// pathsオプションの設定。"module/name": "path"を指定します。拡張子（.js）は指定しません。
paths: {
"jquery": "lib/jquery-1.8.3.min",
"jquery.bootstrap": "lib/bootstrap.min"
},
// shimオプションの設定。モジュール間の依存関係を定義します。
shim: {
"jquery.bootstrap": {
// jQueryに依存するのでpathsで設定した"module/name"を指定します。
deps: ["jquery"]
}
}
});
and then mark Bootstrap as a dependency of the app itself, so that it loads before app.js.
// require(["module/name", ...], function(params){ ... });
require(["jquery", "jquery.bootstrap"], function ($) {
$('#myModalButton').show();
});
Finally, since app.js is the data-main,
<script type="text/javascript" src="./assets/js/require.min.js" data-main="./assets/js/app.js"></script>
Bootstrap's JS is guaranteed to load before any application code.

Bootstrap lib does not return any object like jQuery, Underscore or Backbone: this script just modifies the jQuery object with the addition of new methods. So, if you want to use the Bootstrap library, you just have to add in the modules and use the jquery method as usual (without declarating Bootstrap like param, because the value is undefined):
define([
"jquery",
"underscore",
"backbone",
"marionette",
"collections/Navigations",
"bootstrap",
],
function($,_,Backbone,Marionette,Navigations){
$("#blabla").modal("show"); //Show a modal using Bootstrap, for instance
});

I found it was sufficient to add the following to my requirejs.config call (pseudocode):
requirejs.config({
...
shim: {
'bootstrap': {
deps: ['jquery']
}
}
});

I like to use Require.Js ORDER plugin, what it does? Simply loads all your Libraries in order, in this case you won't get any errors, ohh and bootstrap depends on jQuery, so we need to use shim in this case:
requirejs.config({
baseUrl: "./assets",
paths: {
order: '//requirejs.org/docs/release/1.0.5/minified/order',
jquery: 'http://code.jquery.com/jquery-2.1.0.min',
bootstrap: '//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min'
},
shim: {
'bootstrap': {
deps:['jquery']
}
}
});
require(['order!jquery', 'order!bootstrap'], function($) {
});