Question

I stumbled upon an issue when trying to compile my application which is using Facebook Javascript SDK :

[ERROR] ReferenceError: Can't find variable: FB

This is my setup :

index.html

...


<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>

  <!-- dependencies -->
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'XXXXXXXXXXXXX', // App ID
        channelUrl : '//payme.com:3000/channel.html', // Channel File
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
      });

      // Additional initialization code here
    };

    // Load the SDK Asynchronously
    (function(d){
       var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
       if (d.getElementById(id)) {return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all.js";
       ref.parentNode.insertBefore(js, ref);
     }(document));
  </script>
...

Home.js (where the error is caught)

...
  config: {
    controls: {
      mainView: {
        initialize: 'initView'
      }
    }
  },

  initView: function() {
    var me = this;

    FB.getLoginStatus(function(response) {
      if(response.status === 'connected') {       
        ...
      } else {
        ...
      }
    });
  },
...

I tried to load Facebook SDK asynchronously and synchronously, place the script tag after and before the microloader but nothing works.

Any idea on how to fix this ?

Answer 1

You are loading the Facebook JavaScript SDK asynchronously and probably calling the method FB.getLoginStatus before the SDK is loaded. Call the method FB.getLoginStatus after the SDK is loaded (i.e. on the line where you have // Additional initialization code here )