Google Web Font Loader (in Dataviz package) breaks RequireJS global queue

[frankrue]

We are using Keen in a complex browser/client environment. In our scenarios, we frequently need to pull dynamic AMD modules into our JS namespace. RequireJS always checks the "global queue" when pulling new modules to finish any problem loaders.

All of a sudden, Google's Web Font Loader is kicking back a "null" in the RequireJS global queue, and failing our dynamic AMD modules.

If there is a way to disable the Dataviz package in Keen, since we're only using the WRITING features for our project, this error would stop.

[frankrue]

I was able to workaround this by loading only keen-tracker.js. Nevertheless, for applications sharing RequireJS and the data visualization tools from Keen, this should be worked out.

[jpolo]

Same issue

[dustinlarimer]

@frankrue @jpolo thanks for reporting this, and sorry for the roadblock! RequireJS has been incredibly difficult to support in parallel with other loading/env contexts, so any insights or suggestions you can share would be incredibly helpful. I'm guessing there are lots of interesting design patterns and techniques in the RequireJS world that I just haven't seen or considered yet.

At first glance, I wonder if the font and goog plugins from this repo might help unblock you in the meantime? https://github.com/millermedeiros/requirejs-plugins#plugins

[frankrue]

I'll take a look at the plugins. As I said: I'm not blocked at this point. Using the slimmer keen-tracker.js was a quick and easy workaround. It is probably also better (in size) for our pattern.

[jpolo]

I would suggest to trace the code that could load the library in a script tag. The library then detects that a define global is present and calls it. Because of the direct script tag creation there is no require context attached to the define and the call create an error.
My intuition is that the problem might occur because of the google.load("visualization" ... code in the keen-js library. WebFontLoader seems to have added AMD support and may not be compatible with the google loader API.

[jpolo]

It seems that the bug is present in the v1.1 of google/visualization because with v1 I have no problem.

I recently found a workaround that might be useful for other users : the depend! requirejs plugin

//my_keen.js
define(["depend!keen-js/keen[google/visualization]"], function () {
})

//google/visualization.js
define(["goog!visualization,1,packages:[corechart,geochart,table]"], function () {
   return google.visualization;
})

This peace of code makes sure that google chart is loaded before keen.
I configured requirejs google/visualization to load the library v1.

For the keen.js library the quick fix would be to downgrade google chart to v1 (if possible...). The more robust solution for the future :

1. split tracking and charting into two different libraries
2. create an injectable Loader interface

[pimterry]

Just FYI: I just hit this too.

Large RequireJS project, added Keen, all looked good locally, released to my users and started getting swamped with errors in my logs, because on a small percentage of page loads RequireJS unexpectedly breaks, and some files don't get given their dependencies as they're initialized (so I get exceptions like "'Coord' is not a function", because the dependency on my Coord module has actually just received null instead), and the whole app setup crashes and burns.

This is pretty bad! This is despite using the correct paths config from the README (although I notice you've just now also added a reference to this bug in there).

Seems to have been fixed instantly by just moving to the tracker script, but of course it's hard to tell.

I've just burned quite a lot of time on this, and it seems a bit crazy that you're supplying a RequireJS module that by default breaks any substantially-sized project it's used in. I can see how it's hard to fix, but there's potentially quite bad results from intermittent issues like this. Lots of people (like me) won't catch application-break issues until production! Have you considered just recommending RequireJS users use only the tracker module in the readme directly?

[bjj951]

Another large RequireJS project here, got a couple of nice charts going and then struck problems shortly after. Error: Mismatched anonymous define() module: function (){return $} http://requirejs.org/docs/errors.html#mismatch

[dustinlarimer]

@pimterry @bjj951 finally found a resolution for this.. check this comment out: #112 (comment)