We Keep Coding

Using RequireJS to load dojo modules

I am hosting ArcGIS JS API 4.1 locally in my project, so I have build the esri componenet and I have added the path in my requireJS config file. I also wanted to build the dojo folder, so basically build it to a single output file. But when I add the dojo modules using requireJS bundles I get an error in the esri file that e is not a function(…). The line of code that it appears on is:
define("dojo/_base/config", ["../has", "require"], function(e, t) {
var r = {};
if (e("dojo-config-api")) { ... } //e is undefined.
I get that the error means dojo/has is undefined but I don't understand why. I tried using dojo/has in my project and it is not undefined but in the esri file it says its undefined. Does anybody know how I can fix this.
This is requireJS config file:
requirejs.config({
paths: {
"jquery": 'https://code.jquery.com/jquery-3.1.0.min',
'esri/moment': 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment',
"esri": "../lib/arcgis-js-api-4/main",
"dojo": "../lib/arcgis-js-api-4/dojo-lib",
"dojox": 'http://js.arcgis.com/4.1/dojox',
"dijit": 'http://js.arcgis.com/4.1/dijit'
},
bundles: {
"esri": ["esri/Color",...],
'dojo': ['dojo/has', 'dojo/domReady',...]
},shim: {
"esri": {
deps: ["esri/moment", "dojo", "dojox", "dijit"]
}
}
});
This is the config for the dojo build:
var profile=(function(){
return {
basePath: "./",
releaseDir: "./",
releaseName: "dojoLib",
action: "release",
cssOptimize: 'comments',
layerOptimize: false,
packages:[{
name: "dojo",
location: "src/dojo"
}],
layers:{
"dojo/dojoLib": {
include: ["dojo/dojo", "dojo/i18n", "dojo/domReady", 'dojo/has', 'dojo/request', 'dojo/request/xhr',
'dojo/request/util', 'dojo/request/watch', 'dojo/io/script', 'dojo/io/iframe', 'dojo/query'],
customBase: true,
boot: false
}
}
};
})();

RequireJS multipage r.js

I have a quite large app built with RequireJS and I'm trying optimise the modules with r.js.
But no matter what I do, I always get the same annoying error.
me: ~/WORK/LAB/require_r_js/js
→ r.js -o build.js
Optimizing (standard.keepLines.keepWhitespace) CSS file: /<path_to_my_js_folder>/js/dist/vendor/tinyscrollbar/tinyscrollbar.css
Tracing dependencies for: utils/Vendor
Error: ENOENT, no such file or directory
'/<path_to_my_js_folder>/js/dist/TweenLite.js'
In module tree:
utils/Vendor
cssplugin
It looks like my path cssplugin is been ignored, here is my build.js file:
{
mainConfigFile : "core/commom.js",
appDir: '.',
baseUrl: ".",
removeCombined: true,
findNestedDependencies: true,
dir: "./dist",
paths: {
tweenlite: "vendor/greensock/TweenLite.min",
cssplugin: "vendor/greensock/plugins/CSSPlugin.min",
easepack: "vendor/greensock/easing/EasePack.min",
jquery: "vendor/jquery/jquery-1.11.2.min",
signals: "vendor/signals/signals",
underscore: "vendor/underscore/underscore-min",
retina: "vendor/retinajs/retina-1.1.0",
tinyscrollbar: "vendor/tinyscrollbar/jquery.tinyscrollbar.min",
async: 'vendor/millermedeiros/requirejs-plugins/async',
simpleWeather: 'vendor/simpleWeather/jquery.simpleWeather.min'
},
shim: {
underscore: {
exports: "_"
},
jquery: {
exports: "jQuery"
},
simpleWeather: {
exports: "simpleWeather",
deps: ["jquery"]
}
},
modules: [
{ name: "utils/Vendor" },
{
name: "core/Main",
exclude: ['utils/Vendor']
},
{
name: "controllers/MapsHome"
},
{
name: "controllers/SuperHome"
},
{
name: "controllers/Register"
},
{
name: "controllers/hotel/HotelHome"
}
]
}
Well.. I know it looks a lot of information, but this is my commom.js file (the RequireJS config):
(function() {
requirejs.config({
baseUrl: "../",
waitSeconds: 120,
paths: {
tweenlite: "vendor/greensock/TweenLite.min",
cssplugin: "vendor/greensock/plugins/CSSPlugin.min",
easepack: "vendor/greensock/easing/EasePack.min",
jquery: "vendor/jquery/jquery-1.11.2.min",
jmask: "vendor/igorescobar/jquery-mask-plugin.min",
signals: "vendor/signals/signals",
underscore: "vendor/underscore/underscore-min",
retina: "vendor/retinajs/retina-1.1.0",
tinyscrollbar: "vendor/tinyscrollbar/jquery.tinyscrollbar.min",
async: 'vendor/millermedeiros/requirejs-plugins/async',
simpleWeather: 'vendor/simpleWeather/jquery.simpleWeather.min'
},
shim: {
underscore: {
exports: "_"
},
jquery: {
exports: "jQuery"
},
simpleWeather: {
exports: "simpleWeather",
deps: ["jquery"]
},
facebook: {
exports: 'FB'
}
}
});
}).call(this);
The files are organized in this structure:
Well, in my website the scripts are loaded as this:
<script type="text/javascript">
require([globalServerConf.requireJSConfURL], function() {
require(['core/Main'], function(Main) {
var m = new Main();
// The name of the Page Controller is set by a PHP Variable:
m.init("{{$jsController}}");
});
});
</script>
So, a global JS object (built by a PHP script) has the URL to the requirejs.config object. When commom.js is loaded, RequireJS asks for core/Main.js file. When core/Main is loaded, it will ask first for the utils/Vendor module. This module loads all third part scripts (like jQuery, TweenLite, CSSPlugin, etc etc). Only when these files are loaded, Main.js asks for the page controller file (which makes use of many other files as well).
So, I am trying to build with r.js all these modules:
All third part scripts: utils/Vendor
Main script: core/Main
All other main pages controllers:
controllers/MapsHome, controllers/SuperHome, controllers/Register, controllers/hotel/HotelHome
Every time I run r.js, tweelite or cssplugin makes that error and the optimization is killed.

Impossible to include PNotify with requirejs

So, I export PNotify from bower to the js folder. I use requirejs to include my libraries
HTML
<script data-main="assets/js/app" type="text/javascript" src="assets/js/lib/require.js"></script>
My architecture is like this :
js
--- app.js
--- lib
------ pnotify.core.js
------ pnotify.desktop.js
------ pnotify.buttons.js
------ pnotify.callbacks.js
------ pnotify.confirm.js
------ pnotify.history.js
------ pnotify.nonblock.js
------ pnotify.reference.js
------ jquery.js
------ ...
I add the primary module which is pnotify.core
APP.JS
requirejs.config({
base: '/assets/js',
paths: {
'jQuery': 'lib/jquery.min',
'underscore': 'lib/underscore-min',
'Backbone': 'lib/backbone',
'Modernizr' : 'lib/modernizr',
'PNotify' : 'lib/pnotify.core',
'LoginView' : 'views/login'
},
shim: {
'jQuery': {
exports: '$'
},
'underscore': {
exports: '_'
},
'Backbone': {
exports: 'Backbone'
},
'Modernizr': {
exports: 'Modernizr'
},
'LoginView': {
exports: 'LoginView'
},
'PNotify': {
exports: 'PNotify'
}
}
});
PNotify is loaded in my page. Normally, PNotify works with requirejs : https://github.com/sciactive/pnotify#using-pnotify-with-requirejs
I don't know how can I import all modules, maybe concat these modules in one file pnotify.min.js?
Here, when I call the PNotify object under the requirejs.config
define(['jQuery', 'underscore', 'Backbone', 'Modernizr', 'LoginView', 'PNotify'], function ($, _, Backbone, Modernizr, LoginView, PNotify) {
$(document).ready(function(){
new PNotify({
title: 'Desktop Notice',
text: 'If you\'ve given me permission, I\'ll appear as a desktop notification. If you haven\'t, I\'ll still appear as a regular PNotify notice.'
});
});
});
I have this error : Uncaught TypeError: undefined is not a function on the line "new PNotify"...
Do you have some ideas?

When they detect AMD/RequireJS, PNotify core defines the named module
"pnotify", and PNotify's modules each define names like
"pnotify.module". The following example shows the use of the nonblock
and desktop modules with RequireJS.
So my error is here
requirejs.config({
base: '/assets/js',
paths: {
'jQuery': 'lib/jquery.min',
'underscore': 'lib/underscore-min',
'Backbone': 'lib/backbone',
'Modernizr' : 'lib/modernizr',
'PNotify' : 'lib/pnotify.core',
^_____ 'replace by pnotify'
'LoginView' : 'views/login'
},
...

Compile All the modules into one minified file.
These Settings work for me in Require.js
paths: {
'pnotify': 'lib/pnotify.min',
'pnotify.nonblock': 'lib/pnotify.min',
'pnotify.desktop': 'lib/pnotify.min,
'jquery' : 'lib/jquery'
}
define(['jquery', 'pnotify','pnotify.nonblock', 'pnotify.desktop', function($, pnotify){
new PNotify({
title: 'Desktop Notice',
text: 'If you\'ve given me permission, I\'ll appear as a desktop notification. If you haven\'t, I\'ll still appear as a regular PNotify notice.',
desktop: {
desktop: true
},
nonblock: {
nonblock: true
}
});
});

requirejs throws a 404 trying to load a file from karma runner

I am trying to load a test helper module using requirejs, but it fails even when it has been already loaded as a dependency at the start of karma run, and I can't figure out what's the problem, I always get
There is no timestamp for /base/spec/helpers/testHelpers!'
Tests run fine, inside them I require any module of the app without problem, it only fails when I require specifically something from spec folder.
I have checked all karma related questions and none of them apply to these case.
My karma.conf file:
module.exports = function (config) {
'use strict';
config.set({
basePath: '',
frameworks: ['jasmine', 'requirejs'],
files: [
'bootstrapTests.js',
{
pattern: 'app/**/*.js',
included: false
},
{
pattern: 'entities/**/*.js',
included: false
},
{
pattern: 'config/**/*.js',
included: false
},
{
pattern: 'libs/**/*.js',
included: false
},
{
pattern: 'spec/**/*Spec.js',
included: false
},
{
pattern: 'spec/helpers/**/*.js',
included: false
}
],
exclude: [
'bootstrap.js',
'bootstrap.built.js'
],
preprocessors: {
'app/**/*.js': ['coverage'],
'entities/**/*.js': ['coverage']
},
coverageReporter: {
reporters: [
{
type: 'text-summary'
}
]
},
reporters: ['progress', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false
});
};
My bootstrapTests.js file:
var tests = [];
for (var file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
// Add all spec files and helpers
if (/spec\/.+.js$/.test(file)) {
tests.push(file);
}
}
}
require.config({
baseUrl: '/base',
paths: {
'backbone': 'libs/backbone',
'marionette': 'libs/backbone.marionette',
'jquery': 'libs/jquery-2.1.1',
'json2': 'libs/json2',
'underscore': 'libs/underscore',
'twig': 'libs/twig',
'editor': 'app/editor',
'widgets': 'app/widgets',
'menu': 'app/menu',
'helpers': 'spec/helpers'
},
map: {
'*': {
'jquery': 'config/jquery/jqueryPrivate'
},
'config/jquery/jqueryPrivate': { 'jquery': 'jquery' }
},
deps: tests,
callback: window.__karma__.start
});
so in my tests,
define([
'app/app',
'backbone',
'editor/editorController',
'editor/editorApp',
], function (
myApp,
Backbone,
editorController
) {
'use strict';
describe('editorApp', function () {
.....
works like a charm, but when I try
define([
'app/common/routerUtilities',
'backbone',
'helpers/testHelpers'
], function (
routerUtilities,
Backbone,
testHelpers
) {
'use strict';
describe('routerUtilities', function () {
...
it fails trying to fetch testHelpers, always get the error even when the module is already loaded. I tried specifying the path in all possible ways besides the shortened one: spec/helpers/testHelpers, /base/spec/helpers/testHelpers, /spec/helpers/testHelpers, ../../helpers/testHelpers, etc...
The file is included in tests array as a dependency (checked), so it's loaded (checked with console.log) along my tests and other test setup modules:
LOG: ['/base/spec/app/appSpec.js',
'/base/spec/app/common/routerUtilitiesSpec.js',
'/base/spec/app/editor/EditorLayoutViewSpec.js',
'/base/spec/app/editor/editorAppSpec.js',
'/base/spec/app/editor/editorControllerSpec.js',
'/base/spec/app/menu/menuControllerSpec.js',
'/base/spec/helpers/envSetup.js',
'/base/spec/helpers/testHelpers.js']
I've checked that is included in window._ karma _.files as well (edited for brevity):
LOG: Object{
/base/bootstrapTests.js: 'c389a1d36d1c48f2879d434b10fd5a25b6b07758',
/base/app/app.js: '7ad39554809146effd20dd1db908fc068f8119ba',
/base/app/common/routerUtilities.js: '4da0e1d1794cccc727b544cacbc6d672c0d9965a',
...
/base/config/marionette/renderer.js: '34a5e729f6133aa13841c5e949307cd437ca331b',
/base/config/marionette/templateCache.js: '9f1901d4c6f43f5f90dadacb1c4ac179efd14b15',
/base/spec/app/appSpec.js: 'e01f4fea3533e25cfcd4f7621e1c1c5559e0eed8',
/base/spec/app/common/routerUtilitiesSpec.js: 'a06b9793a635633d053142dff24d1ba4427dd365',
/base/spec/app/editor/EditorLayoutViewSpec.js: 'a24c7e8742e38b86d626bd6f3e45baacfa6af5eb',
/base/spec/app/editor/editorAppSpec.js: '800c0e8e82840ebd0d1af07c3ec4556a24ee0b04',
/base/spec/app/editor/editorControllerSpec.js: 'd2e259a477da85b6a2f742f5c6c3a4a34b7e340b',
/base/spec/helpers/envSetup.js: '297aa1e59477d967aa210bece1726e8a372cb630',
/base/spec/helpers/testHelpers.js: '5266065d344ca69f8f5980db16bf6d131492ebd0'
}
The content of spec/helpers/testHelpers.js is:
define([
'backbone'
], function (
Backbone
) {
'use strict';
var testHelpers = {
setupRoutingTest: function () {
Backbone.history.start();
Backbone.history.navigate('');
},
teardownRoutingTest: function () {
Backbone.history.navigate('');
Backbone.history.stop();
}
};
return testHelpers;
});
My folder structure is:
|-app
|---common
|---editor
|---menu
|---widgets
|-config
|---jquery
|---marionette
|-entities
|-features
|-gruntTasks
|---lib
|-spec
|---app
|-----common
|-----editor
|-----menu
|-----widgets
|---entities
|---helpers
|-tmp

Hi it looks like the karma-requirejs doesn't like the resources to be loaded into the tests array.
Try to modify the code to exclude the helper files and it could help
var tests = [];
for (var file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
// Add all spec files and helpers
if (/spec\/.+.js$/.test(file)) {
tests.push(file);
}
}
}

This drove me a little nuts a while back. Make sure you're using karma-requirejs, not just requirejs.
https://www.npmjs.org/package/karma-requirejs
On that note, don't also load the production version of requirejs.

require.js and r.js dependencies

My app has been working fine but today I decided to give r.js a swirl.
Right now my tree(part of it) looks like
index.html
assets
js
require.js
r.js
main.js
components
underscore.js
jquery.js
backbone.js
jqueryuijs
models
election.js
collections
elections.js
views
app.js
election.js
in my index.html file I have
<script data-main="assets/js/main" src="assets/js/require.js"></script>
and this is main.js
require.config({
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
underscore: 'components/underscore/underscore-min',
backbone: 'components/backbone/backbone-min',
jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min'
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'jqueryui': ['jquery']
}
});
require(['views/app'], function(App) {
var router = Backbone.Router.extend({
routes: {
'': 'root',
'year(/:year)': 'year'
},
root: function() {
new App();
},
year: function(year) {
new App({
year: year
});
}
});
r = new router();
Backbone.history.start({
// pushState: true
});
});
and in my modules I refer to my files like assets/js/views/election.js or assets/js/models/election.js
but when I run r.js with this build.js
({
// baseUrl: "assets/",
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
underscore: 'components/underscore/underscore-min',
backbone: "components/backbone/backbone-min",
jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min'
},
name: "main",
out: "main-built.js"
})
I get Error: ENOENT, no such file or directory '/Users/alex/Dropbox/www/animated-elections/assets/js/assets/js/collections/elections.js'. I get what it means by I don't understand why it is adding another assets/js to my paths.

I believe require.js is supposed to go in the same folder as the main file, ie. next to the assets folder instead of inside it.

r.js is inside your app directory, instead of being a sibling to it, as specified in the example setup.
I haven't tested this but r.js is probably assuming that any module calls should be relative to where it's located.

Add in the build.js file this codes.
baseUrl: ".",
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
underscore: 'components/underscore/underscore-min',
backbone: "components/backbone/backbone-min",
jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min',
'views/app': 'empty:',
'views/election': 'empty:',
//and so with others
},
name: "main",
out: "main-built.js"
Regards.-