如何修复错误 'FB' is not defined no-undef on create-react-app 项目？答案

【问题标题】：How to fix error 'FB' is not defined no-undef on create-react-app project?如何修复错误 'FB' is not defined no-undef on create-react-app 项目？
【发布时间】：2017-03-20 20:58:37
【问题描述】：

我使用这个链接作为我的起始文件制作了这个项目。

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 变量设置例外？

谢谢！

【问题讨论】：

由于 FB 是全局的，而 create-react-app 是模块，您可能需要对此进行填充。即使出现错误，应用程序也能正常工作吗？ stackoverflow.com/questions/5331165/…

标签： facebook reactjs eslint create-react-app

【解决方案1】：

ESLint 不知道变量 FB 是一个全局变量。您可以通过将以下内容添加到文件顶部来将您引用的变量声明为全局变量：

/*global FB*/

有关更多信息，请查看官方 ESLint 文档中的“规则详细信息”部分：http://eslint.org/docs/rules/no-undef

【讨论】：

【解决方案2】：

如果使用 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';

我希望这会有所帮助！

【讨论】：

window.FB 对我来说也未定义？我只能在 window.fbAsyncInit = function () { console.log(window.FB) } 内访问它，但在其未定义之外？怎么办

【解决方案3】：

根据@dan-abramov 在对另一个答案的评论中所说的：

不要使用FB，使用window.FB

这样，您可以明确定义变量 FB 的来源。

【讨论】：

【解决方案4】：

把它放在你的 .eslintrc 文件中，这样你只需要定义一次而不是在每个文件中：

"globals": {
    "FB": true
}

【讨论】：

【解决方案5】：

我可以通过使用 this.FB 而不是 FB 来解决此问题

【讨论】：

不要使用this.FB，它很混乱。你想要window.FB。