Minified Javascript doesn't work when combined in one file

Question

I have 3 JS libraries that I use that are in their own separate files. They are commented with the code minified in each individual file

file 1: http://jsfiddle.net/NGMVa/

file 2: http://jsfiddle.net/AzEME/

file 3: http://jsfiddle.net/qVkhn/

Now individually they work fine in my app, don't throw any errors. But I wanted to load less files so I combined them into one file like this: http://jsfiddle.net/Gxswy/

However, in Chrome it throws an error on the last line of the file:

Uncaught TypeError: undefined is not a function 

and it then it doesn't work anymore. I didn't change anything in the code before I combined them, I just copy and pasted the content of the first 3 files into the new one, and it doesn't work anymore. Don't understand why combining them into one file seems to break functionality

Was hoping someone would have an idea what's going here?

Answer 1

Make sure to add the semicolons at the end of each file or concatenate and then minify and minifier should take care of that.

Try this code: https://gist.github.com/elclanrs/4728677

Answer 2

Reason

In my case it was because I specified dependencies in requirejs's shim, for a library (perfect-scrollbar) that already supports AMD loading. The result is that the whole of its code in define is bypassed after grunt-contrib-requirejs did its job.

Basically, to concat requirejs files together, grunt-contrib-requirejs would

// change this:
define(['d3'],function(d3){...});

// into this:
define('d3', ['d3'],function(d3){...});

Whereas inside perfect-scrollbar, there's already

(function (factory) {
  'use strict';

  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.

    define(['jquery'], factory); // <-------------------------- this part
    // after minification would become:
    // define('PerfectScrollbar', ['jquery'], factory);

  } else if (typeof exports === 'object') {
    factory(require('jquery')); // Node/CommonJS
  } else {
    factory(jQuery); // Browser globals
  }
}(function ($) {
  // perfect-scrollbar code here...
});

Which conflicted with what I specified in shim:

shim: {
    "PerfectScrollbar": ['jquery', 'jquery.mousewheel']
}

Therefore when requirejs got to the part where PerfectScrollbar was really defined, it hopped over it, assuming that it has already done the job.

Solution

Don't specify dependencies in shim for libraries that already have AMD support.

Question

But what if I need to specify dependencies? I need jquery.mousewheel on top of the jquery it already specified in its code.

Answer

Require that file with proper require, and get its own dependencies right:

define(['perfect-scrollbar', 'jquery.mousewheel'], function(){...});

Either when the library you need has AMD support,

// inside jquery.mousewheel:
require(['jquery'], factory);

Or it doesn't

shim: {
    "IDontSupportAMD": ['jquery']
}