web-dev-qa-db-fra.com

Comment corriger l'erreur 'FB' n'est pas définie no-undef sur le projet create-react-app?

J'ai fait le projet en utilisant ce lien comme fichier de départ.

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

Mais après avoir essayé de créer un bouton de connexion Facebook, suivez leurs documents officiels avec cela.

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

J'ai donc eu ces erreurs lorsque le navigateur a été actualisé.

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)

Donc je suppose que c'est ESLint qui cause ces erreurs. Comment puis-je résoudre ce problème ou faire l'exception pour cette variable FB?

Merci!

facebookreactjseslintcreate-react-app
16
Varis Darasirikul

ESLint ne sait pas que la variable FB est un global. Vous pouvez déclarer une variable que vous avez référencée comme globale en ajoutant ce qui suit en haut de votre fichier:

/*global FB*/

Pour plus d'informations, consultez la section "Détails des règles" sur les documents officiels ESLint: http://eslint.org/docs/rules/no-undef

33
vitorbal

Si vous utilisez Create React App, vous devez saisir explicitement les variables globales de window.
Par exemple:

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

Cependant, si la bibliothèque est disponible en tant que package npm, vous pouvez utiliser les importations:

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

J'espère que ça aide!

14
Dan Abramov

Sur la base de ce que @ dan-abramov a déclaré dans un commentaire à une autre réponse:

N'utilisez pas FB, utilisez window.FB

De cette façon, vous définissez explicitement d'où la variable FB doit provenir.

8
jperelli

Mettez-le dans votre fichier .eslintrc, vous n'avez donc qu'à le définir une fois et pas dans chaque fichier:

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