Mootools conflicting with FB.ui (Uncaught TypeError: Cannot read property ‘className’ of undefined)

I just spent a few hours running down a gnarly bug that became an issue on production late last night.  All of the FB.ui dialog calls began to fail on our website with a Javascript exception.

After much trial and error, I was able to determine that Mootools was the root cause.  Without Mootools, everything worked.  With Mootools – whether it’s 1.2 or 1.3.2 – this exception gets thrown:

Uncaught TypeError: Cannot read property ‘className’ of undefined

Then I went in and took a while to make Facebook JS SDK’s all.js human readable so I can step through it and actually understand what’s going on.  It turns out that things blow up when FB.Dialog.create is called, and Mootools had an old, deprecated override on Function.create.

Since we don’t use Function.create anywhere else in the code, I went ahead and commented out and it worked like a charm.  In the uncompressed version of Mootools 1.3.2 source, it’s at line 918.  Or you can search for “Function.implement({” and then take out the create function.

Hope this helps… and hope it saves you guys some time!