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!

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


If you use Create React App, you need to explicitly grab global variables from window. For example:

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

However, if the library is available as an npm package, you can use imports:

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

I hope this helps!


Based on what @dan-abramov stated in a comment to another answer:

Don't use FB, use window.FB

This way, you define explicitely where the variable FB needs to come from.


Put this in your .eslintrc file, so you only have to define it once and not in every single file:

"globals": {
    "FB": true
}

I can fix this by use this.FB instead just FB


Need Your Help

Set up custom subdomain for Jekyll Blog hosted in Github Pages

github subdomain jekyll host github-pages

I created a Jekyll-powered blog and am hosting it with GitHub Pages.

Client-Side Dynamic Removal of <script> Tags in <head>

javascript html browser aggregation

Is it possible to remove script tags in the &lt;head&gt; of an HTML document client-side and prior to execution of those tags?