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!
12 Comments
Fought with this all stinking day yesterday. Your fix works. Unfortunately we have code that is dependent on that method in mootools. Definitely helps give me a place to focus a solution on.
Thanks for the tip, you saved my day !
I never suspected Mootools (because it is javascript goodness) and accused facebook… Well, eviler things get singled out first ! Maybe next time I’ll be less narrow-minded. Cheers !
You saved my life!
Thanks to your tip I went to http://mootools.net/download and downloaded “MooTools Core 1.3.2 without compatibility” and it seems to be working fine… so far… until FB plays another trick on us…
Oh God thank you! I was going crazy trying to fix this, you saved me
Thought I’d throw in here to comment on the “Making JS SDK Human Readable”. I am dealing with a similar bug it would seem messing with FB.apply on the registration plugin, and was doing a search for the uncompressed version of the SDK, and I found this blog post.
TO THE POINT:
In chrome while I have the console open, there a few little icons on the bottom left of the browser window. One of them is a set of curly braces “{}” and its called ‘Pretty Print’ . Click it and Voila! Human readable Javascript! GREAT!
Cannot read property ‘className’ of null all.js –>nice fix
Thank you very much for taking the time to solve this one, and especially to post about it. You have saved me a lot of time, and I really appreciate it!
Oh finally!! You saved my life.
I am not using MooTools and still getting this error. I am using jQuery 1.6.1 and no other javascript libs. Any Idea/help is appreciated..
I haven’t ran into this problem with jQuery, but if I do come across it I’ll post an update here.
Thanks man, you saved my hrs.