Facebook Login error: 'FB' is not defined with Vue.js

Question

I use Facebook Login in Vue-cli, but it shows 'FB' is not defined.

I separate the code in two files : application.js & app.vue

./assets/js/application.js

// Facebook Login
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/zh_TW/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

App.vue

mounted: function(){
    window.fbAsyncInit = function() {
    FB.init({
      appId      : '<appID>',
      cookie     : true,
      xfbml      : true,
      version    : '{api-version}'
    });
    FB.AppEvents.logPageView();  
    };
  }

main.js

import './assets/js/application.js'
import App from './App.vue'

Andriy Kuba · Accepted Answer · 2019-07-02 07:49:22Z

1

You do not have FB in your scope. You need to import it from the library you want to use, like

import { FB as VFacebookLogin } from 'vue-facebook-login-component'

I am not sure what library do you use. This one in my answer is from https://github.com/adi518/vue-facebook-login-component

UPDATE

You separate the code into two files, it can be a reason for the issue. The other reason can be that you do not wait until it will loads. So your mounted works before https://connect.facebook.net/zh_TW/sdk.js have been loaded.

Here is a good example of how it can be done:

https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L7

https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L27

https://github.com/adi518/vue-facebook-login-component/blob/master/src/components/FBLogin.Scope.js#L51

function initFbSdk(options) {
  return new Promise(resolve => {
    window.fbAsyncInit = function () {
      const defaults = { cookie: true, xfbml: true }
      options = { ...defaults, ...options }
      window.FB.init(options)
      resolve()
    };
    /* eslint-disable */
    (function (d, s, id) {
      const fjs = d.getElementsByTagName(s)[0]
      if (d.getElementById(id)) { return; }
      const js = d.createElement(s); js.id = id
      js.src = '//connect.facebook.net/zh_TW/sdk.js'
      fjs.parentNode.insertBefore(js, fjs)
    }(document, 'script', 'facebook-jssdk'))
    /* eslint-enable */
  })
}

function getFbSdk(options) {
  return new Promise(async resolve => {
    if (window.FB) {
      resolve(window.FB)
    } else {
      await initFbSdk(options)
      resolve(window.FB)
    }
  })
}

Then you can use it as

const sdk = await getFbSdk({ appId, version, options }) //sdk === FB in this case

edited Jul 2, 2019 at 7:49

answered Jul 2, 2019 at 7:04

Andriy Kuba

8,2732 gold badges31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

muki Over a year ago

I didn't use any library for FB login, I just go to FB developers site and copy the code what they provided.

Andriy Kuba Over a year ago

Can you give the exact link to the page where you got that code?

muki Over a year ago

here: developers.facebook.com/apps{app-id}/fb-login/quickstart/

Michael Mano Over a year ago

Its window.FB as its a global, sometimes referencing it without window won't work, also make sure you include the fb script before your main app js

jofftiquez Over a year ago

Have you seen firebase's authentication using facebook?

Collectives™ on Stack Overflow

Facebook Login error: 'FB' is not defined with Vue.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related