Category Archives: Javascript

GruntJS “Warning: Uglification failed.”

I was working with Grunt the other day attempting to update some legacy code to use uglify and I kept getting errors such as:

>> Uglifying source path/to/file.js failed.
Warning: Uglification failed.
Unexpected token punc «(», expected punc «:».
Line 12 in path/to/file.js
 Use --force to continue.

Aborted due to warnings.

When I went to line 12 I saw absolutely nothing wrong. It was a comment block like the following:

/*
An unobtrusive comment goes here
*/

I tried removing the file from the list being included and it happened again. Same error different file. Everything I was reading said it was most likely invalid Javascript doing it, but since I write code perfectly, that could not be the case. Fast forward 10-20 minutes and I found this issue on Github that sounded similar. A comment from Eric Range advised that their code editor had added a line ending of “\n\r” to the file and that caused their build to fail. So I took a look at line endings and sure enough, a handful of the files were using “\n\r”. I did a find/replace and changed them all to just a single new line (“\n”). I attempted to uglify it once more and yet again I was shown an error! I was beginning to think uglify and I were not going to be good friends.

Running "uglify:build" (uglify) task
{ message: 'Unexpected token: eof (undefined)',
  filename: 'file.js',
  line: 3032,
  col: 0,
  pos: 129381,
  stack: 'Error\n    at new JS_Parse_Error (/path/to/node/node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:196:18)\n    at js_error (/path/to/nodenode_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:204:11)\n    at croak (/path/to/nodenode_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:678:41)\n    at token_error (/path/to/nodenode_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:682:9)\n    at unexpected (/path/to/nodenode_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:688:9)\n    at block_ (/path/to/nodenode_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:1000:28)\n    at /path/to/nodenode_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:974:25\n    at function_ (/path/to/nodenode_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:979:15)\n    at expr_atom (/path/to/nodenode_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:1187:24)\n    at maybe_unary (/path/to/nodenode_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:1357:19)' }
>> Uglifying source path/to/file.js failed.
Warning: Uglification failed.
Unexpected token: eof (undefined).
Line 3032 in path/to/file.js
 Use --force to continue.

Aborted due to warnings.

I looked at the differences between the files that worked and the ones that failed. The only difference I found was that the failed files used tabs instead of spaces (they were created at a time when there was no convention for tabs vs spaces). So I converted the files that were using tabs to spaces and tried again. Bingo! It worked perfect.

Final Solution

My final solution was to change all files to use unix line endings (“\n”) and to convert tabs to spaces.

RequireJS “jQuery not defined”

This is a super quick and simple post… but maybe it’ll save someone time down the line. I sure won’t make the mistake again. I spent more time than I would like to admit figuring out this issue. There are a lot of posts sprinkled around about different causes of the error, none of which were the cause of my error.

Given the following RequireJS config:

require.config({
    "baseUrl":"\/path\/to\/dir\/",
    "paths":{
        "jQuery":"jquery.js"
    }
});

I was trying to do the following:

require([jQuery], function ($) {
    console.log($);
});

That gave me the dreaded “jQuery not defined” error!

Solution

Add quotes around “jQuery”!

require(["jQuery"], function ($) {
    console.log($);
});

Without the quotes jQuery was being treated as a Javascript variable instead of a string. So when it was looking for the jQuery dependency it did not exist. “jQuery” on the other hand does.

Tab completion TextExt

I was working with TextExt for the first time and wanted to do some tab completion for efficiency. I was surprised to find it wasn’t a default option (or if it is I couldn’t find it!) This is how I did it though.

$('#tags').on('keydown', function(e) { 
   var keyCode = e.keyCode || e.which; 

   if (keyCode == 9) { 
   // the prevent default allow you to stay in focus in the input and keep adding tags in
   e.preventDefault(); 
   $(this).val('');
   $('#tags').textext()[0].tags().addTags([$('.text-selected span').text()]);
   } 
});

Thoughts on KnockoutJS

If you haven’t had a chance to use or read about KnockoutJS, do so!

I had wanted to try it out in a project for a while and the opportunity presented itself a few months back so I jumped on it.  It was at first a little confusing to work with because it was my first exposure to the concept of MVVM.

MVVM

For those not yet familiar, Knockout is self described as a Model View ViewModel (MVVM) framework. It took me a little bit to wrap my head around what exactly a ViewModel is. The ViewModel is kind of like a controller, but reversed. It handles interaction between the View and the Model (probably why it is called a ViewModel), but it doesn’t handle things like picking which View file to render like a traditional Controller might do in the MVC pattern. The best example I found when reading about it was from Addy Osmani.

“Rather than our models being aware of a user’s view of the date (e.g 04/07/2012 @ 5:00pm), where it would be necessary to convert the address to it’s display format, our model simply holds the raw format of the data.”

So the ViewModel is responsible for interpreting the Model data and sending it off to the View. On page load the View loads in and anywhere that data is bound it asks the ViewModel what goes there. The ViewModel in turns interacts with the Model and passes that data to the View.

So what blew me away?

Perhaps it was just the wow factor, but I was in awe by the concept of observables and their uses within a web application. By creating an observable variable and binding that to a text input, the value of the variable is then updates in real time if the user changes it. This allows you to build an application that in real time validates and sanitizes the data in the “big picture” rather than the typical validation/sanitizing of a specific field one at a time. For example, you build an application that validates zipcode based on the state. If a user moves they would come in and first update their state, if they attempted to save without updating the zipcode it may save because the data “was” valid with the old state. Using Knockout you can set up rules and checks so that once the state changes it would also check the zipcode and any associated data to ensure it is valid. Depending on the field type you could use the computed field type instead of observable, or you can create a function that subscribes to the change of a field.

self.stateField = ko.computed(function(){
// combine fields and validate address 
// to make sure it is good to go
});

self.stateField.subscribe(function(value) {
// do what you need to to check if other 
// stuff is accurate now that state has changed
});