How to fix error 'FB' is not defined no-undef on create-react-app project?

Question

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!

As FB is a global and create-react-app is modules, you might have to shim this. Is the application working even with the error? http://stackoverflow.com/questions/5331165/how-to-workaround-fb-is-not-defined — Garry Taylor, Nov 07 '16 at 14:15

score 46 · Accepted Answer · answered Nov 07 '16 at 14:43

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

score 16 · Answer 2 · answered Nov 12 '16 at 18:04

16

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!

answered Nov 12 '16 at 18:04

Dan Abramov

264,556
84
409
511

window.FB is also undefind for me ? i'm only getting access to it inside window.fbAsyncInit = function () { console.log(window.FB) } this works but outside its undefined ?? what to do – Shamseer Ahammed Apr 05 '20 at 21:55

score 13 · Answer 3 · answered Feb 20 '17 at 15:04

13

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.

answered Feb 20 '17 at 15:04

jperelli

6,988
5
50
85

score 3 · Answer 4 · answered Jan 16 '18 at 20:24

3

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

"globals": {
    "FB": true
}

answered Jan 16 '18 at 20:24

andyrandy

72,880
8
113
130

score -2 · Answer 5 · answered Nov 07 '16 at 14:36

-2

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

answered Nov 07 '16 at 14:36

Varis Darasirikul

3,907
9
40
75

5

Don't use `this.FB`, it is quite confusing. You want `window.FB`. – Dan Abramov Nov 12 '16 at 18:05

How to fix error 'FB' is not defined no-undef on create-react-app project?

5 Answers5

Linked