During integration testing, one of our publishers recently reported that their Comments section didn’t work correctly after adding our tags. Nothing else seemed to be amiss, and our content was appearing and behaving correctly.
When Choices Collide
After inspecting the publisher’s page, we noticed Zepto was in play; a lightweight alternative to jQuery. Zepto also uses
window.$ yet it was unbound (which seemed strange), preventing their comments section from loading. We’ve implemented a no-conflict version of jQuery since Day 1 and after integrating with so many other publishers, we knew we would’ve seen issues arising from its no-conflict mode.
We rigged up a test page to include jQuery in no-conflict mode and included Zepto on the same page. We downloaded an un-minified version of Zepto to trace why it wasn’t binding
window.$. The answer turned out to be mismatched expectations: jQuery assumed that if they returned
window.$ back to
undefined all would be well, and Zepto assumed that if
window.$ existed at all, it was a sign that another library was using that global.
Given that jQuery and Zepto are alternatives to one another, it makes perfect sense why no one had run into this before.
Here’s the original conflict-avoidance check in Zepto:
1 2 3
// If `$` is not yet defined, point it to `Zepto` window.Zepto = Zepto '$' in window || (window.$ = Zepto)
…and the results after our pull request was merged (which happened quickly - thanks Zepto team!).
1 2 3
// If `$` is not yet defined, point it to `Zepto` window.Zepto = Zepto window.$ === undefined && (window.$ = Zepto)
Once again, you can never make any assumptions about what will happen on a publisher’s page. When hunting down the problem, starting from first principles is the best way forward.
Huge thanks to the Zepto team for responding so quickly!