How to fix error 'FB' is not defined no-undef on create-react-app project?
Solution 1
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
Solution 2
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!
Solution 3
Based on what @dan-abramov stated in a comment to another answer:
Don't use
FB
, usewindow.FB
This way, you define explicitely where the variable FB needs to come from.
Solution 4
Put this in your .eslintrc file, so you only have to define it once and not in every single file:
"globals": {
"FB": true
}
Varis Darasirikul
By day: I am working on the front-end side of the product call Testhero (http://app.testhero.in.th/) app that will help you prepare for the necessary test in Thailand. By night: I am founder and also CTO of https://thaimdb.co/ which i built and designed the whole site by my self.
Updated on June 15, 2022Comments
-
Varis Darasirikul almost 2 years
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!