jQuery Vs jQuery

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.

Shipping 3rd Party JavaScript comes with its own unique set of challenges. This is another in our series of posts to inform publishers and providers on issues arising when JavaScript bumps into each other.

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)

Learnings

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!