Toolbar introduces race condition on requireJS sites

[spectras]

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.

[aaugustin]

Ha, yet another RequireJS edge case...

We've already tried half a dozen ways to work around RequireJS' fierce incompatibility with just about anything else. Check past issues and let us know if you have a better solution.

[aaugustin]

Link to past issues: https://github.com/django-debug-toolbar/django-debug-toolbar/issues?labels=RequireJS&page=1&state=closed

[spectras]

For now I just disabled the debug toolbar, and re-enable it when I need it (for DB queries report mostly, and template context checks sometimes, but the DB thing is awesome).
As the debugging power provided by toolbar is orthogonal to scripting, it works for me this way.

But a workaround that seems to work for me is like this:

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

requireJS will still load another copy for requireJS-enabled modules. Not optimal, but toolbar won't go to production site anyway.

I know requireJS is hard to combine with non-requirejs environments, it's likely other issues will come regarding this very lib :)

[pierreant-p]

We're also affected by this issue :(
We're downgrading to 1.1 for now, but we'd love to know when the issue is fixed!

[NotSqrt]

👍

[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 %}

[aaugustin]

Maybe we should just document that.

[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.