Toolbar introduces race condition on requireJS sites

On version 1.2.1, do not know for master nor older releases. Opening an issue so other people with the same problem can find this. It turns out google was not my friend on that one.

Root cause: In file debug_toolbar/templates/debug_toolbar/base.html (the one that gets injected into site’s pages), lines 8 to 10, the code hijacks window.define and restores it later.

However, as it is a global and requireJS does aynchronous loading, a whole bunch of funny stuff can happen randomly.

Some effects: Here is what I experienced until I eventually found out debug_toolbar was the culprit:

• some other module gets ready and tries to call define at this very time, breaking with a define is not defined, aborting module load.
• more fun: the main jQuery completing its loading asynchronously, registering itself as window.jQuery only to have debug toolbar call noConflict on it, before requireJS has time to grab the reference. Therefore, everything appears to load fine, except module that use jQuery will get undefined instead of jQuery.

Workaround: As a workaround, it is possible to set JQUERY_URL to None in the settings. This forces debug_toolbar to use the main jquery and not try to load its own. However, doing so requires that the main jQuery be loaded before the toolbar kicks in so either:

• load jQuery synchronously
• or wrap the whole scripting part of debug_toolbar in a require(['jquery'], function(jQuery){ }) block, then wrap toolbar’s script in define blocks. That’s messy though, I would not recommend it.

[spectras]

I found another approach that seems to work fine for me. That would probably require some kind of setting or something. I replaced all the script loading in base.html with this:

<script>
require(['jquery'], function ($) {
    window.djdt = {jQuery: $};
    require(['{% static "debug_toolbar/js/toolbar.js" %}']);
});
</script>

That makes the loading of toolbar.js get deferred until jQuery has been loaded through AMD, and injects the jQuery reference into djdt, where the toolbar expects it.

[NotSqrt]

I confirm that the following works :

• set JQUERY_URL to None in toolbar settings
• load jQuery before requireJS

{% if debug %}<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>{% endif %}