Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix error 'FB' is not defined no-undef on create-react-app project?

I made the project using this link as my starting file.

https://github.com/facebookincubator/create-react-app

But after i tried to make Facebook login button with follow by their official docs with this.

componentDidMount(){
    console.log('login mount');
    window.fbAsyncInit = function() {
        FB.init({
            appId      : '320866754951228',
            xfbml      : true,
            version    : 'v2.6'
        });

        FB.getLoginStatus(function(response) {
            //this.statusChangeCallback(response);
        });

    };

    (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 = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

So i got this errors when the browser was refreshed.

Failed to compile.

Error in ./src/components/user_profile/LoginForm.js

/Sites/full_stack_production/xxxxx
  70:13  error  'FB' is not defined  no-undef
  76:13  error  'FB' is not defined  no-undef

✖ 2 problems (2 errors, 0 warnings)

So i guess because ESLint that cause this errors. How can i fix this or make the exception for this FB variable?

Thanks!

like image 915
Varis Darasirikul Avatar asked Nov 07 '16 13:11

Varis Darasirikul


People also ask

How do I log into Facebook with React JS?

Run our React App to login with FacebookGo to https://localhost:3000 and you can see the browser displays a button to Login With Facebook as below. Click the Login with Facebook\ button then it will be a Facebook login dialog pop up.

How do I use Facebook SDK in react?

FB. logout(function(response) { // user is now logged out }); And this is the code that I used react-facebook-rogin Library. import React from "react"; import Navbar from './components/Navbar'; import { BrowserRouter as Switch, Route } from 'react-router-dom' import './components/Navbar.

Does Facebook create react?

React (also known as React. js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.


1 Answers

ESLint doesn't know that the variable FB is a global. You can declare a variable you referenced as a global by adding the following to the top of your file:

/*global FB*/

For more information, check out the "Rule Details" section on the official ESLint docs: http://eslint.org/docs/rules/no-undef

like image 185
vitorbal Avatar answered Sep 21 '22 18:09

vitorbal