Loading Highcharts via shim using RequireJS and maintaining jQuery dependency-Collection of common programming errors

I’m attempting to load the Highcharts library using a shim in RequireJS. However, when Highcharts loads, it throws an exception because it can’t access the jQuery methods it depends on.

The require config looks like so:

require.config({
    baseUrl: "js",

    shim: {

        'libs/highcharts/highcharts.src.js': {
            deps: ['jquery'],
            exports: function(jQuery)
            {
                this.HighchartsAdapter = jQuery;

                return this.Highcharts;
            }
        }
    }
});

The exception that is thrown is:

Uncaught TypeError: undefined is not a function

and is in regards to this line:

dataLabels: merge(defaultLabelOptions, {

The issue is the merge call, which eventually maps itself back to jQuery (or some other adapter that Highcharts supports; but I’m just using jQuery).

I’m not sure exactly how to make sure Highcharts gets access to jQuery using RequireJS and shim.

Has anyone used RequireJS and Highcharts together before? I guess the issue isn’t specific to highcharts, but any library that has other sorts of dependencies.

Thanks in advance for any advice or points to the correct direction!

To add further context, in hopes that someone who is familiar with require.js or shims will be able to help without having to be too intimately familiar with highcharts, here’s some source that sets up this merge method in Highcharts

var globalAdapter = win.HighchartsAdapter,
adapter = globalAdapter || {},

// Utility functions. If the HighchartsAdapter is not defined, 
// adapter is an empty object
// and all the utility functions will be null. In that case they are 
// populated by the
// default adapters below.

// {snipped code}

merge = adapter.merge

// {snipped code}

if (!globalAdapter && win.jQuery) {
    var jQ = win.jQuery;

    // {snipped code}

    merge = function () {
        var args = arguments;
        return jQ.extend(true, null, args[0], args[1], args[2], args[3]);
    };

    // {snipped code}
}

The win object is a reference set up to window at the beginning of the script. So, I thought adding window.jQuery = jQuery; to the export method on the shim would result in highcharts picking up the jQuery reference; but it didn’t.

Again, any insight, info, advice, or heckles would be appreciated at this point – I’m at a complete loss, and starting to question whether trying to implement and AMD package system in browser javascript is even worth it.

After accepting the answer from pabera below I thought it appropriate to update my question to reflect how his answer helped my solution (though, it’s basically his answer).

RequireJS uses “paths” to find libs that aren’t “AMD” supported and loads them on your page. the “shim” object allows you to define dependencies for the libraries defined in paths. The dependencies must be loaded before requirejs will try to load the dependent script.

The exports property provides a mechanism to tell requirejs how to determine if the library is loaded. For core libs like jquery, backbone, socketio, etc they all export some window level variable (Backbone, io, jQuery and $, etc). You simply provide that variable name as the exports property, and requirejs will be able to determine when the lib is loaded.

Once your definitions are done, you can use requirejs‘ define function as expected.

Here’s my example require.config object:

require.config({
    baseUrl: "/js/",

    paths: {
        jquery: 'jquery',
        socketio: 'http://localhost:8000/socket.io/socket.io', //for loading the socket.io client library
        highcharts: 'libs/highcharts/highcharts.src',
        underscore: 'libs/underscore',
        backbone: 'libs/backbone'
    },

    shim: {
        jquery: {
            exports: 'jQuery'
        },

        socketio: {
            exports: 'io'
        },

        underscore: {
            exports: '_'
        },

        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },

        highcharts: {
            deps: ['jquery'],
            exports: 'Highcharts'
        }
    }
});

As pabera mentioned before, this is for Require.JS version 2.0.1.

I hope someone gets some use out of this; I know it road blocked me for a little while; so hopefully we kept you from banging your head into the same spot in the wall that we did, by posting this.