We Keep Coding

Ember.js: "Can't find variable: exports"

I started compiling my Ember.js templates server-side using the "ember-template-compiler.js" file mentioned here.
After compiling my templates and transpiling the output with Babel, I get a file which contains all of my templates assigned to an object called "export". Here are the first few lines:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = Ember.HTMLBars.template((function () {
return {
meta: {
...
Now I've integrated jQuery, "ember.prod.js" and that file within the front-end. I thought it would work, but the only thing I get from the console, is:
ReferenceError: Can't find variable: exports
Why is "exports" not defined?
P.S.: Usually, I would use "ember-cli" for all of this. But in my current project, I need to do everything by myself (please don't ask, why).
But it should work, am I right? I mean, I did it exactly like it was stated here.

Fixed the problem by writing my own template compiler for Gulp istead of trying to use the one in Ember CLI: https://github.com/leo/gulp-ember-compiler

RequireJS not loading modules properly using karma and typescript

I am trying to set up unit testing for a SPA using karma/jasmine
First of all, the following test runs just fine in karma:
/// <reference path="../../definitions/jasmine/jasmine.d.ts" />
/// <reference path="../../src/app/domain/core/Collections.ts"/>
define(["app/domain/core/Collections"], (collections) => {
describe('LinkedList', () => {
it('should be able to store strings for lookup', () => {
var list = new collections.Collections.LinkedList<string>();
list.add("item1");
expect(list.first()).toBe("item1");
});
});
});
However, collections is of type anyso that I can not use it for type declarations, thus I'm missing intellisense and whatnot when I am writing my tests. No good!
The problem arises when I try to re-write the test to a more TypeScript friendly format:
/// <reference path="../../definitions/jasmine/jasmine.d.ts" />
/// <reference path="../../src/app/domain/core/Collections.ts"/>
import c = require("./../../src/app/domain/core/Collections");
describe('LinkedList', () => {
it('should be able to store strings for lookup', () => {
var list: c.Collections.LinkedList<string> = new c.Collections.LinkedList<string>();
list.add("item1");
expect(list.first()).toBe("item1");
});
});
This compiles just fine, I get my type information for handy intellisense etc, but now karma throws an error.
It turns out it is trying to load the module without the .js postfix, indicated by the following error messages:
There is no timestamp for /base/src/app/domain/core/Collections!
Failed to load resource: the server responded with a status of 404 (Not Found)
(http://localhost:9876/base/src/app/domain/core/Collections)
Uncaught Error: Script error for: /base/src/app/domain/core/Collections
I'm gonna stop here for now, but if it will help I am glad to supply my karma config file, test-main and so on. But my hope is that someone has encountered this exact problem before and might be able to point me in the right direction.
My typescript is compiled with the AMD flag.

It is not a TypeScript problem. We encountered the same problem. Turns out that karma "window.__karma__.files" array includes all files included in the test, including the .js extenstion.
Now requireJS does not work when supplying the .js extension. To fix it, in our main-test.js file, we created a variable "tests" by filtering all the *Spec.js files and then we removed the .js from the file name as requireJS needs it to be. More information here: http://karma-runner.github.io/0.8/plus/RequireJS.html
Below is how we did it (based on the info supplied in the link above):
main-test.js
console.log('===========================================')
console.log('=================TEST FILES================')
var tests = Object.keys(window.__karma__.files).filter(function (file) {
return /\Spec\.js$/.test(file);
}).map(function (file) {
console.log(file);
return file.replace(/^\/base\/|\.js$/g, '');
});
console.log('===========================================')
console.log('===========================================')
require.config({
baseUrl:'/base',
paths: {
jquery :["http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min", "lib/jquery"],
angular : ["https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min", "lib/angular"],
angularMocks: 'app/vendors/bower_components/angular-mocks/angular-mocks',
},
shim: {
'angularMocks': {
deps: ['angular'],
exports: 'angular.mock'
}
},
deps: tests,
callback: window.__karma__.start
});
Also make sure you have supplied the files to be tested in your karma.config.js file, more details here: http://karma-runner.github.io/0.8/plus/RequireJS.html same as the link above.
Hope it helps

It turns out it is trying to load the module without the .js postfix,
That is the perhaps not the actual source of the error. Actually it is looking at /base/src/app/domain/core/Collections and not app/domain/core/Collections (as in your manual type unsafe way). Notice base/src/ that shouldn't be there.

Browserify separate libs.js and app.js causes Backbone to not find jQuery

I would like to split up my libs and my app code in separate bundles so I can insert script tags for each separately since I don't want jQuery, Backbone and Underscore to be added to each of my apps bundles.
However, I've tried several ways of doing this and each time I get an error from Backbone saying:
Uncaught TypeError: Cannot read property 'ajax' of undefined
I'm compiling a libs.js file that looks like this:
global.$ = require('./jquery')
global._ = require('underscore')
global.Backbone = require('backbone')
I had to manually download jQuery and stuff it in my /src/vendor folder because nom install jquery just fails for some reason.
I also have some simple test app code that compiles to app.js:
// User.js
var Backbone = require('backbone')
module.exports = User = Backbone.Model.extend({
url : '/user'
});
// app.js
var User = require('./user');
var u = new User()
u.on('change', function(e){
$('h1').append('Updated!')
});
u.fetch()
In my HTML the script tag for libs.js precedes that of app.js.
Maybe I've just approached this whole thing in a weird way from the start, because there doesn't seem to be much helpful in the way of googling when it comes to using these libs in this way, so any input on this is greatly appreciated!

I read up some more about externalizing, aliasing and shimming in Browserify. I was finally able to put together a Coffeescript gruntfile configuration that works:
browserify:
libs:
src: ['src/vendor/jquery.js', 'underscore', 'backbone'],
dest: 'public/js/libs.min.js'
options:
alias: ['backbone:', 'underscore:']
shim:
jQuery:
path: 'src/vendor/jquery'
exports: '$'
home:
src: ['src/js/main-home.js']
dest: 'public/js/main-home.min.js'
options:
external: ['backbone', 'underscore']
In main-home.js I am now able to do var Backbone = require('backbone') and then Backbone.$ = $ and everything works.

Seem like jQuery is not loaded correctly, that error is probably because you are attempting to call $.ajax but $ is undefined.
Maybe another reason maybe because that you're trying to load jQuery before Backbone. Try to do the opposite way by include your Backbone before jQuery instead.

Using Dust in require.js

Sorry for posting another "how do you use * with require.js" question, but I can't seem to get dust.js working in my require project. I've googled around and other people are definitely getting dust to work with require. My configuration is fairly standard, but I can't find anyone having the same problems as I'm seeing.
I'm using the version of dust 0.3.0 from here:
https://github.com/akdubya/dustjs/blob/master/dist/dust-core-0.3.0.js
here is my config:
requirejs.config({
//exceptions:
paths: {
'jquery' : 'lib/require-jquery.1.9.1',
'jquery.mockjax' : 'lib/jquery.mockjax.1.5.1',
'dust' : 'lib/dust.0.3.0'
},
//Shims are required for jQuery plugins.
shim: {
'jquery.mockjax': {
deps: ['jquery'],
exports: 'jQuery.fn.mockjax'
},
'dust': {
exports: 'dust'
}
}
});
this is how I include dust in my module:
define( function( require ) {
var _d = require('dust')
, _template1 = require('text!template/basicmodal.html');
function render(key,callback){
var compiled = _d.compile("Hello {name}!", key);
_d.loadSource(compiled);
_d.render(key, {name: "Fred"}, callback);
}
return {
render : render,
If I set a breakpoint within the render function I can see that _d does contain the dust object, but for some reason it doesn't have all its methods. In particular its 'compile' method is missing which causes my code to fail.
Does anyone with a better understanding of dust know what I might be missing here?

Please see if using https://github.com/akdubya/dustjs/blob/master/dist/dust-full-0.3.0.js instead helps you.

Dust is now supported by Linkedin. If you want to compile some dust template, maybe this might help you https://github.com/linkedin/dustjs/wiki/Dust-Tutorial#compiling-a-dust-template.
I am not an expert in JS but it could be useful to use Backbone in addition to dust + require.
Chek out this (I don't have enough reputation to put more links) : http://weatherlabs.com/2012/10/12/backbone-underscore-and-dust/

You can precompile the template and have it wrapped in a define call using this npm module:
https://npmjs.org/package/grunt-dust-require

Require.js from command line mode

Let's suppose I can access the following code:
http://localhost/web/src/js/myApp.js
Now I want to load myApp.js using requirejs from the javascript command line mode.
I did try the following but it does not work. Any ideas?
requirejs.config({
baseUrl: "http://localhost/web/src/"
});
require("js/myApp"); // Error: Module name 'js/myApp' has not been loaded yet for context: _ http://requirejs.org/docs/errors.html#notloaded

That's because require('FILENAME') is used for loading already loaded files...i don't know what's the purpose behind it. You should use:
require(['module'], function(mod) {
... do some work ...
// later, maybe if you want this (although, i don't understand why)
require('module', function(m) {
... do some work with m - the new (or old?) module!
})
});