I love React, it has quickly become my favorite development tool. It is a fantastic library that creates the kind of flexibility I've always dreamed about.
That said, I'm having a very hard time getting Facebook login to work with React in production.
I have tried all of the following methods. In all three cases, I implemented the examples exactly as shown in the code using the simplest possible technique:
https://github.com/seeden/react-facebook
https://github.com/keppelen/react-facebook-login
http://jslancer.com/blog/2017/11/27/facebook-google-login-react/
Everything works great in development. :)
When I create the production build using create-react-app and push it live, it breaks and reports: Error: Facebook is not initialized or Uncaught TypeError: Cannot read property 'login' of undefined where undefined is FB.
Basically it seems like the Facebook javascript SDK is not loaded or initialized.
The first two links above are for existing component libraries, but the third is a custom implementation that places the Facebook initialization code in the index.html file and creates an event listener. The results are the same in all three examples.
It is as if something about the create-react-app compression method is obfuscating the variables to the point that Facebook can no longer work, or at least is not available to the react code. This includes all calls to window.FB as recommended in many tutorials.
I've been working at this for a couple of weeks now (off and on) and am now turning to the hive mind. Anyone have any ideas on how to get Facebook to actually work with Facebook's own code library (React)? It seems so painfully odd that it causes this much trouble and I have been unable to find a clear solution that works in production.
Most of the debugging steps are already mentioned in the comments section.
Here are the steps laid down:
1) Check the network tab in your browser's console and see if the request to load FB's SDK is successful or not
2) Most common culprit is some extension like Ad-Blocker blocking such async requests which loads JS on your web page. Disable it or try it incognito mode
3) Other common mistake I have seen is forgetting to use the FB.init({ // config }); function - which is the actual call which initializes the fb sdk and makes available the FB variable globally.
Related
I've built a simple Android app, as a companion piece to a publication website, with the Ionic framework, and (after much head-banging), I managed to get the Disqus threads on the app to sync with those on the site. After trying a few different methods, I ended up going with this directive from Michael Bromley to implement the Disqus widget in the app, which is hiding behind a "Comments" button at the bottom of each article on the app's UI.
Running with Ionic Serve, everything works brilliantly. Outside of the local server: not so much. I don't get an error message from Disqus – it simply doesn't load the iframe at all. I'm refraining from posting code, because I'm wondering if this is simply a CORS issue, or maybe something simple that I'm overlooking.
One thing that might be of importance: I don't have the Crosswalk plugin installed on the app – I'm not sure if my thinking is correct, here, but could it be possible that Disqus is compatible with Chrome, which is why it runs fine when I'm testing it on my browser, but isn't compatible with Android's default browser? I'm not extremely well-read on Crosswalk, but I believe it tells the app to use a specific browser – if so, could installing it fix the problem? I'd go ahead and install it, and see if it helps, but I'd like to avoid tampering too much with an otherwise-working app if the issue is something completely unrelated to the plugins.
One weird caveat: The Disqus comments loaded on one article just fine when I tested the app on Genymotion. I deleted that article, and created a new Test article on my site (thus firing up a new Disqus thread), and that failed to render on Genymotion. It seems very... random, I guess, that it would work once. It would seem that it would either work all the time, or never work.
EDIT: While running on Genymotion, no errors appear in the console when debugging the app with WebView. The fact that I'm not getting a "Refused to load" error makes me think that Disqus is getting called and, for whatever reason, is refusing to answer the phone at all.
I can spend hours trying to figure something out, and then... well, as soon as I post a question, I end up figuring out the answer five minutes later.
I dug looked into the code for the directive I was using (which I highly recommend for anybody looking to easily implement Disqus into any AngularJS project), and I noticed that was calling for embed.js with the following string:
....
if (!$window.DISQUS) {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + scope.config.disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
} else {
....
Amending dsq.src = '//' + scope.config.disqus_shortname + '.disqus.com/embed.js';to add a protocol, making it dsq.src = 'http://' + scope.config.disqus_shortname + '.disqus.com/embed.js';fixed the issue on Genymotion. I'll ship the updated APK to the Play Store, and comment on this answer to confirm whether or not it holds up there, as well.
Adobe AIR application which was working perfectly earlier; is not working now. No idea whether it is due to any recent change in Facebook or Adobe AIR.
I have added the component mx:HTML to display http://facebook.com content. In the development environment (Flash Builder 4.5) after logging in facebook successfully; I can see the TimeLine contents and updates properly. But after build when executed outside the IDE; I am able to login facebook but the timeline or updates are not being displayed properly.
Anybody facing similar issue and has a fix; please provide the solution.
uncaughtScriptException gives following two errors...
TypeError: Result of expression 'bigPipe' [undefined] is not an object.
ReferenceError: Can't find variable: console
I have similar issue, if you catch the javascript errors you will notice that facebook is using some library that fails in AIR, then if you google that exact error you will find similar issues. My solution was to use the FB API and reimplement the functionality(in my case share) , other alternatives is to fix that library or FB code to make it work. I don't remember the details but I fixed it a week ago.
Check the docs for catching the JS errors uncaughtScriptException
I am wondering if that library has code for each browser that it supports and on AIR it fails, maybe changing useragent will help, you need to check the javascript code to see where it fails
I got this warning message on Chrome whith My facebook application.
The method FB.JSON.parse is not officially supported by Facebook and access to it will soon be removed.
and
The method FB.JSON.stringify is not officially supported by Facebook and access to it will soon be removed.
When this flash is loaded this message appears.
I'm using Facebook Flash AS3 API 1.8.1, SWFObject 2.2.
What does it mean ?
Test here (facebook test): https://apps.facebook.com/vuvuzelagame/
Thanks.
I have the same error on my application.
As you probably know, the Facebook AS3 API calls JavaScript functions to communicate with FB, and, as Baris says, this error is a warning that one of those JS functions that it calls is deprecated and will soon be removed.
You can safely ignore it for the present. Hopefully the API will be updated before the function is actually deprecated, otherwise we may get a breaking bug rather than just a warning. I'm going to keep an eye out for updates to the API and upgrade my code as soon as one is released.
Or, if you're feeling really brave, you can go digging in the API source and fix the issue yourself :)
A few days ago, many flash apps suddenly stopped working, if you have this problem follow this steps:
If you are using GraphAPI_Web_1_8_1.swc delete it
Download the modified graph API from here
Paste those folders on your library, if you had the facebook folder overwrite it
Publish your project
This problem started when facebook changed its file http://connect.facebook.net/en_US/all.js in a way that all the calls made from the AS3 file FacebookJSBridge.as must be changed from FB.JSON to just JSON.
(Source)
FB.JSON.stringify is that a javascript function or actionscript function?
In flash if you are targetting flash player 11 and up you can just use JSON.parse and JSON.stringify, or you can use the JSON class in the com.adobe.serialization package.
If that is a javascript method, just get a json library from the web.
The error just means facebook is no longer supporting/updating that function and they will remove it. It will stop working soon so you should replace your usages of it with something else.
I have applications which are displayed as tabs in Facebook pages which have been working fine. They suddenly started displaying this output in the tab:
/1336720089,176820405/
if (window.CavalryLogger) { CavalryLogger.start_js(["EgxV3"]); }
__d("UFIUpdate",
Any ideas what is going on???
Here is a link to one of them: http://www.facebook.com/TweakShoes/app_132692060112327
A temporary solution is to add https:// to facebook itself. This doesn't solve the problem, but it'll allow you to see your page on a per client basis.
The best fix in the longer term until facebook fixes this issue is to go to your account settings > Security > Enable secure browsing. This will enforce HTTPS wherever it can and should resolve the issue for a lot of pages you're trying to access.
Good Luck!
After encountering this issue yesterday, I tracked it down to an apparent conflict with the JS log wrapper included as part of HTML5 Boilerplate's script.js file. In particular, the "make it safe to use console.log always" snippet. After commenting it out, the FB lib error went away and my app displayed properly.
I didn't dig into what the conflict was, but here is the snippet. If you use something similar on your page, then it may be worth investigating.
/* make it safe to use console.log always */
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
{console.log();return window.console;}catch(err){return window.console={};}})());
It's probably not a coincidence that FB's own logger bugs out with this.
Facebook has opened a bug for this issue and recently triaged it to medium priority - no word on when it will be addressed.
I develop a FB app using Flash using wmode="direct" (for 3D graphics).
In Internet Explorer, every time I popup any FB dialog (e.g Purchase Credits dialog), the flash disappears and when the dialog is closed, the flash does not re-appear...
I tried to set the visibility after dialog is closed:
http://developers.facebook.com/docs/appsonfacebook/tutorial/ (under "Special Considerations for Adobe Flash developers"), but it didn't work.
I've also tried the use FB.Init hideFlashCallback:
http://developers.facebook.com/blog/post/555/ (under "Detecting visibility of Flash objects in Canvas apps"), but it doesn't seem to call the callback function...
Any one had the same issue and manage to make it work?
Any other suggestions?
P.S - I use swfobject to embed the SWF file.
Thank a lot!
Roei
UPDATE: I removed the appId param from the FB JS url:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#appId=XXXX&xfbml=1"></script>
and now the hideFlashCallback is executed, but still - the flash does not re-appear...
I've updated the section Special Considerations for Adobe Flash developers because the code snippet was a bit out-of-date.
The new snippet should give you an idea of how to use the hideFlashCallback, whose semantics have changed since that now out-of-date blog post, in that the function now takes a flash element as an argument. (Unfortunately, we haven't redocumented it yet, but will soon). One thing to note is that the callback does not currently work on IE8, but will after a fix gets pushed next Tuesday.
That said, it should work without that callback. It may be caused by a javascript fatal that stops script execution before the re-showing happens. Look in your javascript console to see if you see any errors.
Otherwise, if you can give me the canvas URL for your application, I can look into it.
Did you try it with other wmodes? what you can try is actually remove the div where you write your flash to, add it with innerHTML and run the swfobject.embed again