I am trying to use waypoints with zepto and RequireJS.
My requireJS configuration looks like this:
requirejs : {
options : {
baseUrl : '<%= config.app.js %>',
paths : {
almond : '../node_modules/almond/almond',
zepto : '../node_modules/zepto/zepto.min',
'progressbar' : '../node_modules/progressbar.js/dist/progressbar',
waypoints : '../node_modules/waypoints/lib/zepto.waypoints'
},
shim : {
zepto : {
exports : '$'
}
},
mainConfigFile: '<%= config.app.js %>/common.js',
include : ['common'],
name : 'almond',
out : 'dist/js/<%= pkg.name %>.js',
insertRequire: ['common'],
wrap: true
},
dist : {
options : {
optimize: 'uglify2'
}
},
dev : {
options : {
optimize: 'none'
}
}
},
Furthermore, my common.js file is as follows:
define(['zepto', 'waypoints'], function($) {
var waypoint = $('#experience').waypoint({
handler: function(direction) {}
});
});
But when the page is loaded, I get the following error:
Uncaught TypeError: Cannot read property 'apply' of undefined
The error, comes from this line on the waypoints plugin library:
return this.$element[method].apply(this.$element, args)
When I debug the code, I can see that function ZeptoAdapter(element) is called twice, once with $('#experience') as element, and once with window. The second time is when it fails, since this.$element is undefined. Am I doing something wrong? What's the proper way of including a zepto plugin?
Thanks,
Waypoints doesn't do anything to export for CommonJS or AMD. I believe you need to shim it as well:
shim : {
zepto : {
exports : '$'
},
waypoints: {
deps: ['zepto'],
exports: 'Waypoint'
}
}
This solve my problem
shim : {
jqueryWaypoints:{
deps: ['jquery'],
exports: 'jqueryWaypoints'
}
}
Related
Ok, there is a bunch of questions with similar titles, but none of them helped me solve my problem so here it is.
I am trying to use Angular with RequireJS; I am getting the error message Uncaught TypeError: Cannot read property 'module' of undefined which is referring to the angular object within the angular-routes.js file. This suggests to me that requireJS is trying to load angular-routes before angular has loaded. I was under the impression that this wouldn't happen because I have set 'angular-route' as dependant on 'angular' within the shim. Can anyone spot what I am doing wrong here?
// Setup requireJS
require.config({
baseUrl : "scripts",
packages : [
{ "name":"angular", "location":"../bower_components/angular", "main":"angular"},
{ "name":"angular-route", "location":"../bower_components/angular-route", "main":"angular-route"},
{ "name":"angular-animate", "location":"../bower_components/angular-animate", "main":"angular-animate"},
{ "name":"angular-storage", "location":"../bower_components/angular-storage/dist", "main":"angular-storage"},
{ "name":"jquery", "location":"../bower_components/jquery/dist", "main":"jquery"}
],
shim:{
'angular' : { exports : 'angular', deps : ['jquery'] },
'angular-route' : { deps : ['angular'] },
'angular-animate' : { deps : ['angular'] },
'angular-storage' : { deps : ['angular'] },
}
});
// Load app files
function loadApp($, app)
{
angular.element(document).ready(function(){
angular.bootstrap(document, ['mealPlannerApp']);
});
}
requirejs(['app'], loadApp);
My app.js file is as follows
(function() {
// Declare AMD module with dependencies
define(['angular', 'angular-route', 'routes'],
function(config)
{
var app = angular.module('mealPlannerApp', ['ngRoute', 'ngAnimate', 'ngAnimate']);
app.config(config);
});
}());
Packages are great for your internal packages, I haven’t tried to load main AngularJS files as them.
Please read http://jonathancreamer.com/require-js-packages-for-building-large-scale-angular-applications/ for some better clarification and examples than change config section to something like this. Major change is replacement of packages with paths
Please also consider to change variables to camelCase style
require.config({
paths: {
angular: '../bower_components/angular/angular',
'angular-route': '../bower_components/angular-route/angular-route',
'angular-animate': '../bower_components/angular-route/angular-animate',
'angular-storage': '../bower_components/angular-route/angular-storage'
},
shim: {
'angular' : { exports : 'angular', deps : ['jquery'] },
'angular-route' : { deps : ['angular'] },
'angular-animate' : { deps : ['angular'] },
'angular-storage' : { deps : ['angular'] },
},
priority: [
"angular"
]
});
I'm trying to use the r.js optimiser for the first time.
My main file looks like this:
/*--- Require.js: the main module loader ---*/
require.config({
baseUrl: 'assets/js',
waitSeconds: 0,
paths : {
jquery : '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min',
jqueryui : '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min',
underscore : 'vendor/underscore/underscore-min',
backbone : 'vendor/backbone/backbone',
routefilter : 'vendor/backbone.routefilter/backbone.routefilter',
marionette : 'vendor/marionette/marionette',
tpl : 'vendor/require/tpl',
async : 'vendor/async/async',
require_async : 'vendor/require/require_async',
modernizr : 'vendor/modernizr/modernizr.custom.15872',
hello : 'vendor/hello/hello',
facebook : 'vendor/hello/facebook',
google : 'vendor/hello/google',
moment : 'vendor/moment/moment',
$dropdown : 'vendor/jquery.dropdown/jquery.dropdown',
spin : 'vendor/spin/spin',
selectBoxIt : 'vendor/selectBoxIt/selectBoxIt',
maskedinput : 'vendor/maskedinput/maskedinput',
multidatespicker : 'vendor/multidatespicker/jquery-ui.multidatespicker'
//markerclusterer : 'vendor/markerclusterer/markerclusterer'
},
shim : {
underscore: {
exports: '_'
},
backbone: {
deps : ['jquery', 'underscore'],
exports : 'Backbone'
},
marionette: {
deps : ['jquery', 'underscore', 'backbone'],
exports : 'Marionette'
},
routefilter: {
deps : ['marionette', 'backbone', 'underscore', 'jquery'],
exports : 'Routefilter'
},
selectBoxIt: {
deps : ['jquery', 'jqueryui'],
exports : 'SelectBoxIt'
},
multidatespicker: {
deps : ['jquery', 'jqueryui'],
exports : 'MultidatesPicker'
},
facebook: {
deps : ['hello'],
exports : 'Facebook'
},
google: {
deps : ['hello'],
exports : 'Google'
}
//markerclusterer: {
// exports : 'Markerclusterer'
//}
},
config: {
moment: {
noGlobal: true
}
}
});
//--- Define Google maps to make it globally accessible throughout the application ---//
define('gmaps', ['require_async!https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry,places&key=AIzaSyDRKg-SNBODA1mKMCRrfMrls48x7owr9w8&sensor=true"'],
function(){
// return the gmaps namespace for brevity
return window.google.maps;
});
//--- Define moment ---
require(["moment"], function (moment) {
moment().format();
});
// --- Initialize the application ---//
require([
'zwoop', 'backbone'
], function(Zwoop, Backbone){
Zwoop.start();
});
The build file contains the following settings:
mainConfigFile:"js/main.js",
baseUrl : "js",
name: "main",
out: "dist/main.js",
removeCombined: true,
findNestedDependencies: false,
paths: {
jquery: "empty:"
}
I don't receive any errors, but unfortunately I receive an error in the browser:
Uncaught ReferenceError: $ is not defined
It appears that either jquery is not properly loaded from the CDN, or that something is not working correctly regarding the shim.
Can you spot what the error might be?
I have an optimized config.js (around 420kB) thats loaded by requirejs and everytime a new user registers and logs in this file is fetched and put in the cache , but the first time the user fetches this there is always a Uncaught Error: Load timeout for modules: config, and then the user has to refresh and then it loads.
I thought it's a timeout issue, so changed waitSeconds : 200. This happened in requireJs 2.1.6 so I upgraded to the latest 2.1.9 and still the same issue.
But if I don't use the optimizer and and use the unoptimized config file (3KB) which loads around 35-40 small js files (minified), it's going fine! But I want all the files to be in that optimized config.js because of less http requests (good for mobile).
Adding Code :
require.config({
paths : {
jquery : './vendor/libs/jquery-1.10.1.min',
underscore : './vendor/libs/underscore-min',
backbone : './vendor/libs/backbone-min',
marionette : './vendor/libs/backbone.marionette',
wreqr : './vendor/plugins/backbone.wreqr.min',
text : './vendor/plugins/text',
tpl : './vendor/plugins/tpl',
socketio : '../socket.io/socket.io.min',
spin : './vendor/plugins/spin.min',
shuffle : './vendor/plugins/jquery.shuffleLetters',
magicSuggest : './vendor/plugins/magicsuggest-1.3.0-min',
mCustomScroll : './vendor/plugins/jquery.mCustomScrollbar.concat.min',
imagesloaded : './vendor/plugins/imagesloaded',
qTip : './vendor/plugins/jquery.qtip.min',
visibility : './vendor/plugins/visibility',
tab : './vendor/plugins/tab',
dropdown : './vendor/plugins/dropdown',
interestsMap : './interestsMap',
moment : './vendor/plugins/moment.min',
favicon : './vendor/plugins/tinycon'
},
waitSeconds : 180,
shim : {
socketio : {
exports : 'io'
},
underscore : {
exports : '_'
},
backbone : {
deps : ['underscore','jquery'],
exports : 'Backbone'
},
marionette : {
deps : ['backbone'],
exports : 'Backbone.Marionette'
},
wreqr : {
deps : ['backbone'],
exports : 'Backbone.Wreqr'
},
shuffle : {
deps : ['jquery'],
exports : 'jQuery.fn.shuffleLetters'
},
magicSuggest : {
deps : ['jquery'],
exports : 'jQuery.fn.magicSuggest'
},
mCustomScroll : {
deps : ['jquery'],
exports : 'jQuery.fn.mCustomScrollbar'
},
visibility : {
exports : 'Visibility'
},
tab : {
deps : ['jquery'],
exports : 'jQuery.fn.tab'
},
dropdown : {
deps : ['jquery'],
exports : 'jQuery.fn.dropdown'
},
moment : {
exports : 'moment'
},
favicon : {
exports : 'Tinycon'
}
},
tpl : {
extension : '.tpl'
}
});
//Initialise
require([
'backbone',
'routers/index',
'app',
],function (Backbone ,Router ,app){
//var presence = io.connect(w.protocol+'//'+w.host+'/presence');
app.start();
Backbone.history.start();
});
**There are no errors in any of the modules since there are loading fine with the unoptimised config.js file .
Build config
({
appDir : '../',
baseUrl: './scripts',
dir : '../../dist',
mainConfigFile : '../scripts/config.js',
name: "config",
optimizeCss : 'standard'
})
To prevent your problem you can disable the require js timeout with the require js config property waitSeconds (set to 0). Default timeout are 7 seconds (see more http://requirejs.org/docs/api.html#config-waitSeconds).
But you should have a look at r.js (http://requirejs.org/docs/optimization.html#wholeproject) because with this you can merge all your js source files into one bigger app.js file with all dependencies. To use it you should remove the dir property and add the out property in your config file.
I am learning Marionett on the side, and am trying to stick to the core amd build and not shim marionett. here's my require config:
require.config({
paths : {
backbone : 'lib/backbone',
underscore : 'lib/underscore',
jquery : 'lib/jquery',
marionette : 'lib/backbone.marionette',
'backbone.wreqr' : 'lib/backbone.wreqr',
'backbone.babysitter' : 'lib/backbone.babysitter',
hbs : 'lib/hbs',
Handlebars : 'lib/Handlebars'
},
shim : {
jquery : {
exports : 'jQuery'
},
underscore : {
exports : '_'
},
backbone : {
deps : ['jquery', 'underscore'],
exports : 'Backbone'
}
},
hbs: {
disableI18n: true,
disableHelpers: true
}
});
I am getting Backbone is undefined in the application module of marionette when I create an application module as follows:
define(["marionette", "views/CatCompositeView"], function (Marionette, CatCompositeView) {
var app = new Marionette.Application();
app.addRegions({
mainRegion: '#content'
});
app.addInitializer(function(options){
var catCompositeView = new CatCompositeView({
collection: options.cats
});
app.mainRegion.show(catCompositeView);
});
return app;
});
Any ideas? I am able to get it all working when shimming marionette so I'm ok for now, but would like to load it all individually.
UPDATE: Here's how I ended up doing this in my require config:
require.config({
paths : {
backbone : 'lib/backbone',
underscore : 'lib/underscore',
jquery : 'lib/jquery',
marionette : 'lib/backbone.marionette',
'backbone.wreqr' : 'lib/backbone.wreqr',
'backbone.babysitter' : 'lib/backbone.babysitter',
hbs : 'lib/hbs',
Handlebars : 'lib/Handlebars'
},
shim : {
jquery : {
exports : 'jQuery'
},
underscore : {
exports : '_'
},
backbone : {
deps : ['jquery', 'underscore'],
exports : 'Backbone'
},
'backbone.wreqr': {
deps : ['backbone']
},
'backbone.babysitter': {
deps : ['backbone']
}
},
hbs: {
disableI18n: true,
disableHelpers: true
}
});
You need to shim Backbone.Marionnette too:
marionette : {
deps: ["backbone", "underscore"],
exports: "Backbone.Marionette"
}
See update above. I needed to add backbone as a dependency for wreqr and babysitter to load them individually.
I'm trying to optimize RequireJS using GruntJS, using the grunt-contrib-requirejs plugin.
The problem is my code works fine before optimizing it, and then after optimizing it, on the console it says Uncaught ReferenceError: define is not defined.
Here's the Gruntfile.js
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.initConfig({
requirejs: {
compile : {
options : {
name : 'main',
baseUrl : ".",
mainConfigFile : "./main.js",
out : "./optimized.js",
preserveLicenseComments: false
}
}
}
})
grunt.registerTask('default', 'requirejs');
}
Adding the require.js file as an "include" option should work.
requirejs: {
compile : {
options : {
name : 'main',
baseUrl : ".",
mainConfigFile : "./main.js",
out : "./optimized.js",
preserveLicenseComments: false,
include: ['path/to/require.js']
}
}
}
As define is a requireJs function it seems you miss to load requireJs or any other AMD loader. If you dont need to load any other AMD module then your complied once, you can use a light weight loader shim like almond.
As pointed out before the requirejs-script is missing.
This is the way the official requirejs-page suggests you do it (ripped from my gruntfile):
requirejs: {
compile: {
options: {
baseUrl: "src/js",
mainConfigFile: 'src/js/require.config.js',
paths: {
requireLib: "vendor/require/require"
},
include: "requireLib",
name: "require.config",
out: "dist/js/bundle.js"
}
}
},
Observe the options paths and include, those are vital for the require to be defined.
Just point the requireLib-option to your require.js-file.
See the official answer here: http://requirejs.org/docs/optimization.html#onejs
It seems that the grunt-contrib-requirejs doesn't compile requirejs in by default. You could use concat to re-add requirejs back in.
concat : {
dist : {
src : ['./optimized.js', 'path/to/requirejs.js'],
dest : './optimized.js'
},
}
grunt.loadNpmTasks('grunt-contrib-concat');