Как исправить ошибку "FB" не определен no-undef в проекте create-react-app?

Я сделал проект, используя эту ссылку в качестве исходного файла.

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

Но после того, как я попытался сделать кнопку входа в Facebook, следуйте своим официальным документам.

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'));
}

Поэтому я получил эти ошибки, когда браузер был обновлен.

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)

Поэтому я думаю, потому что ESLint вызывает эти ошибки. Как я могу исправить это или сделать исключение для этой переменной FB?

Благодарю!

Ответ 1

ESLint не знает, что переменная FB является глобальной. Вы можете объявить переменную, на которую вы ссылаетесь как глобальная, добавив следующее в начало файла:

/*global FB*/

Для получения дополнительной информации ознакомьтесь с разделом "Сведения о правилах" в официальных документах ESLint: http://eslint.org/docs/rules/no-undef

Ответ 2

Если вы используете приложение Create React, вам нужно явно захватить глобальные переменные из window.
Например:

// It a global so need to read it from window
const FB = window.FB;

Однако, если библиотека доступна как пакет npm, вы можете использовать импорт:

// It an npm package so you can import it
import $ from 'jquery';

Надеюсь, это поможет!

Ответ 3

На основании того, что @дан-абрамов заявил в комментарии к другому ответу:

Не используйте FB, используйте window.FB

Таким образом, вы четко определяете, откуда должна исходить переменная FB.

Ответ 4

Поместите это в свой файл.eslintrc, поэтому вам нужно только определить его один раз, а не в каждом отдельном файле:

"globals": {
    "FB": true
}

Ответ 5

Я могу исправить это, используя this.FB вместо этого просто FB