Sitecore 8: Fixing Experience Editor JavaScript Errors When Using jQuery and RequireJS

This is a tough one.

When using RequireJS or any other AMD JS (Asynchronous Module Definition) framework to load jQuery within a Sitecore 8+ website, you're going to get an error in Experience Editor and Preview modes.

Here's the error. Let me assure you - it's not your fault.

Error: prototype.js:5644 Uncaught TypeError: element.attachEvent is not a function
Error: prototype.js:5734 Uncaught TypeError: element.dispatchEvent is not a function

Unfortunately in Preview and Experience Editor modes Sitecore loads JavaScript that is not AMD compliant. I'm looking at you Protoype.js. Prototype.js is where we find the errors, but the problem is a recent hack (which is even documented as such) in jQuery +2.

I won't do a super deep dive on this, but Sitecore is loading the Prototype.js and jQuery which both use window.$. That is the variable $ in the global namespace of window. Sitecore is very specific about the order Prototype and jQuery are loaded and used so that with no other JavaScript on the page they're never sharing the window.$.

Clear?

This is where jQuery's hack gets us into trouble. Even when we're using an AMD framework like RequireJS, jQuery 2.x & 3.x willfully pollutes window.$ in global namespace. See below.

// Expose jQuery and $ identifiers, even in AMD
// (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if ( !noGlobal ) {
	window.jQuery = window.$ = jQuery;
}

return jQuery;
}));

If I were my parents, I'd spank jQuery. Explicit defiance to modern web.

You'll find this offensive snippet at the very end of your uncompressed jQuery file. For example, in jQuery 2.2.3 it starts at line 9834.

The problem is that Sitecore expects window.$ to belong to Prototype.js as it loads the Experience Editor / Preview UI but "window.$" gets overwritten by jQuery instead.

Sitecore ends up calling attachEvent() on a jQuery object (whoops!) instead of Prototype.js object.

Here's how you can fix it.

/*

DC - Removing this "fix" as it's storing jQuery in the global namespace, overwriting protoype.js from Sitecore asyncronously.

// Expose jQuery and $ identifiers, even in AMD
// (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if (!noGlobal) {
    window.jQuery = window.$ = jQuery;
}

*/

return jQuery;
}));

The fix is simply to comment out or delete those lines. You could also add conditional logic to expand the if() clause such as if(!noGlobal && !window.define).

These lines of code we're removing aren't that bad in truth, but Sitecore's Experience Editor is a mash-up of many different libraries plus our own code. It's a fragile ecosystem. Our levels of assumptions need to be very low. This is the whole reason why use AMD JS. It's definitely frustrating to see jQuery make their own code-breaking assumptions that are antithetical to the AMD JS pattern - while attempting to support AMD.

Thanks for reading.