Mootools conflict with Richfaces modal panel

Question

We are using Mootools in our project and also JSF Richfaces to build the application components. We have a requirement to use a richfaces modal panel to show an alert when session timesout. But when both Mootools and rich faces modal panel are used together, we are getting some errors which points to a conflict with the prototype.js used by both.

The error which I can see in the browser console is as below:

Uncaught TypeError: undefined is not a function localhost:8080/ca/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript:46 Uncaught TypeError: Illegal invocation localhost:8080/ca/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript:31 Uncaught TypeError: Illegal invocation localhost:8080/ca/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript:265

Any hints/soultion to the problem is highly appreciated.

~Ragesh

Answer 1

this has been stated many times before. so let's do it once more:

you cannot run Mootools and Prototype.js together. ever. it is impossible.

why?

Both are prototypal - ie they extend the native types by adding to or changing the prototypes of things like Array, Function, Number, String, Element.

Whereas libraries like jQuery wrap / chain methods behind a single entry point like $ , allowing you to use noConflict / closures etc, you cannot have more than one method implementation with the same name on the prototype of a common type.

in reality, if say, the MooTools implementation of String.prototype.contains differs from the Prototype one (and the ES6 one), it will break either your MooTools code or your prototype code, dependent on which one got loaded last. Furthermore, the ES6 implementation was not protected and was being overwritten by MooTools (for insrtance).

Loading last does not ensure that things will work either. If a script has a check like:

if (!String.prototype.trim) String.prototype.trim = function(){ ... }; 

...and the expectation is that if it's there, it must be the native spec implementation, which also removes things like   etc, then the framework won't redefine it. so even if it looks like it's working, you may get unexpected behaviour and hard to catch bugs.

tl;dr: don't use two frameworks or at least use jquery + one of the two. Prototypal frameworks are not safe to use and have become unfashinable - both MooTools and Prototype are more powerful than jQuery and yet they lost the war, because they are harder to maintain and use with other people's code.