web-dev-qa-db-ja.com

エラー「FB」がcreate-react-appプロジェクトでno-undefに定義されていないのを修正する方法は？

このリンクを開始ファイルとして使用してプロジェクトを作成しました。

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変数を例外にしたりするにはどうすればよいですか？

ありがとう！

facebookreactjseslintcreate-react-app
16
Varis Darasirikul

ESLintは、変数FBがグローバルであることを認識していません。ファイルの先頭に以下を追加することにより、グローバルとして参照した変数を宣言できます。

/*global FB*/

詳細については、ESLintの公式ドキュメントの「ルールの詳細」セクションをご覧ください。 http://eslint.org/docs/rules/no-undef

33
vitorbal

Create React Appを使用する場合は、windowからグローバル変数を明示的に取得する必要があります。
例えば：

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

ただし、ライブラリがnpmパッケージとして利用できる場合は、インポートを使用できます。

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

これが役に立てば幸いです！

14
Dan Abramov

@ dan-abramovが別の回答へのコメントで述べたことに基づいて：

FBは使用せず、window.FBを使用してください

このようにして、変数FBの取得元を明示的に定義します。

8
jperelli

これを.eslintrcファイルに入れてください。定義する必要があるのは1つだけで、すべてのファイルで定義する必要はありません。

"globals": {
    "FB": true
}
3
luschn