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.<\/p>\n
The require config looks like so:<\/p>\n
require.config({\n baseUrl: \"js\",\n\n shim: {\n\n 'libs\/highcharts\/highcharts.src.js': {\n deps: ['jquery'],\n exports: function(jQuery)\n {\n this.HighchartsAdapter = jQuery;\n\n return this.Highcharts;\n }\n }\n }\n});\n<\/code><\/pre>\nThe exception that is thrown is:<\/p>\n
Uncaught TypeError: undefined is not a function\n<\/code><\/pre>\nand is in regards to this line:<\/p>\n
dataLabels: merge(defaultLabelOptions, {\n<\/code><\/pre>\nThe issue is the merge<\/code> call, which eventually maps itself back to jQuery (or some other adapter that Highcharts supports; but I’m just using jQuery).<\/p>\nI’m not sure exactly how to make sure Highcharts gets access to jQuery using RequireJS and shim.<\/p>\n
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.<\/p>\n
Thanks in advance for any advice or points to the correct direction!<\/p>\n
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<\/code> method in Highcharts<\/strong><\/p>\nvar globalAdapter = win.HighchartsAdapter,\nadapter = globalAdapter || {},\n\n\/\/ Utility functions. If the HighchartsAdapter is not defined, \n\/\/ adapter is an empty object\n\/\/ and all the utility functions will be null. In that case they are \n\/\/ populated by the\n\/\/ default adapters below.\n\n\/\/ {snipped code}\n\nmerge = adapter.merge\n\n\/\/ {snipped code}\n\nif (!globalAdapter && win.jQuery) {\n var jQ = win.jQuery;\n\n \/\/ {snipped code}\n\n merge = function () {\n var args = arguments;\n return jQ.extend(true, null, args[0], args[1], args[2], args[3]);\n };\n\n \/\/ {snipped code}\n}\n<\/code><\/pre>\nThe win<\/code> object is a reference set up to window<\/code> at the beginning of the script. So, I thought adding window.jQuery = jQuery;<\/code> to the export method on the shim would result in highcharts picking up the jQuery reference; but it didn’t.<\/p>\nAgain, 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.<\/p>\n
After accepting the answer from pabera<\/em> below I thought it appropriate to update my question to reflect how his answer helped my solution (though, it’s basically his answer).<\/p>\nRequireJS 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.<\/p>\n
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<\/code>, io<\/code>, jQuery<\/code> and $<\/code>, etc). You simply provide that variable name as the exports<\/code> property, and requirejs will be able to determine when the lib is loaded.<\/p>\nOnce your definitions are done, you can use requirejs<\/code>‘ define<\/code> function as expected.<\/p>\nHere’s my example require.config<\/code> object:<\/p>\nrequire.config({\n baseUrl: \"\/js\/\",\n\n paths: {\n jquery: 'jquery',\n socketio: 'http:\/\/localhost:8000\/socket.io\/socket.io', \/\/for loading the socket.io client library\n highcharts: 'libs\/highcharts\/highcharts.src',\n underscore: 'libs\/underscore',\n backbone: 'libs\/backbone'\n },\n\n shim: {\n jquery: {\n exports: 'jQuery'\n },\n\n socketio: {\n exports: 'io'\n },\n\n underscore: {\n exports: '_'\n },\n\n backbone: {\n deps: ['jquery', 'underscore'],\n exports: 'Backbone'\n },\n\n highcharts: {\n deps: ['jquery'],\n exports: 'Highcharts'\n }\n }\n});\n<\/code><\/pre>\nAs pabera<\/em> mentioned before, this is for Require.JS<\/code> version 2.0.1<\/code>.<\/p>\nI 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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; } } […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2902","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=2902"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2902\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=2902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=2902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=2902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}