JS reference error regarding external library with 2.9

JS reference error regarding external library with 2.9

by Krzysztof Młynarczyk -
Number of replies: 2

Dear Developers,

I've been writing a plugin using YUI-based javascript modules. It's been working in 2.7 and 2.8, but in 2.9 one of the scripts loading external libraries stopped working. The errors I'm getting are listed below:

ReferenceError: c3 is not defined charts.js:18:8
Error: Mismatched anonymous define() module: [object Object]
http://requirejs.org/docs/errors.html#mismatch

I'm getting an error from require.js which was not used by previous Moodle versions and I don't have a clue as to what went wrong here.

Charts.js starts with:

YUI({
    groups: {
        "c3lib": {
            base: M.cfg.wwwroot + '/local/chemplugin/js/',
            modules: {
                "d3": {
                    path:"d3.min.js",   
                },
                "c3": {  
                    path:"c3.min.js",
                    requires: ["d3"],
                },
            }
        }
    }
}).use("d3","c3", "io", "json-parse","node","event","attribute","node-event-simulate", function(Y){

    var chartbysubstance = c3.generate({
...

Other YUI-based scripts that do not load anything external seem to work fine. D3.js library is loaded here while c3.js apparently is not. If anybody knows what is wrong, please help me fix the issue so that I could update the plugin.


Average of ratings: -
In reply to Krzysztof Młynarczyk

Re: JS reference error regarding external library with 2.9

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I had similar problems with Generico and VideoEasy and PoodLL in Moodle 2.9. So I suspect that you are experiencing what I did.

The thing is that in Moodle 2.9 require.js is available to load modules via AMD. If your modules are not AMD modules that is fine. However many third party libraries actually check if this is an AMD environment or not. I experienced this with literally canvas,  jquery ui and a few other libraries. 

If they detect the availability of require.js they switch to using an anonymous define when they start. Require.js needs scripts that use anonymous defines, to be loaded via AMD, ie by require.js. Otherwise it conflicts.

So you need to switch from YUI to AMD if you want to use those libraries. Or hack the library so that it doesn't put itself into AMD /anonymous define mode. (I played with that but thought better of it.)


Average of ratings: Useful (1)
In reply to Justin Hunt

Odp: Re: JS reference error regarding external library with 2.9

by Krzysztof Młynarczyk -

Thank you very much for helping me out.

Indeed, c3's discovery of AMD mode turned out to be the source of the problem. For now, I used the latter solution, i.e. disarming AMD checking in c3 and everything works again. Of course it's just a temporary workaround before I rewrite my plugin's js scripts according to the new guidelines for Moodle 2.9+.

Average of ratings: -